Jak zmniejszyć jasność obrazu w CSS

107

Chcę zmniejszyć jasność obrazu w CSS. Dużo szukałem, ale jedyne, co mam, to to, jak zmienić krycie, ale to sprawia, że obraz jest jaśniejszy. czy ktoś może mi pomóc ?

css

— Shadi
źródło

możesz użyć krycia atrybutu

— Satinder singh

Użyłem go, ale zwiększa jasność ...

— Shadi,

zaakceptowana odpowiedź działa dobrze, ale jest też nowy filterefekt standardu CSS , o którym będziesz chciał wiedzieć na przyszłość. Zobacz moją odpowiedź.

— Spudley,

1

@shady, czy możesz ponownie przejść do tego pytania, aby oznaczyć jedną z odpowiedzi oferujących rozwiązania dotyczące filtrów jako poprawną. Odpowiedź, którą zaznaczyłeś jako poprawna, byłaby sposobem na zrobienie tego powiedzmy w 2006 roku.

— Wes Modes

177

Funkcja, której szukasz, to filter. Jest w stanie wykonywać szereg efektów graficznych, w tym jasność:

#myimage {
    filter: brightness(50%);
}

Możesz znaleźć pomocny artykuł na ten temat tutaj: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Inny: http://davidwalsh.name/css-filters

A co najważniejsze, specyfikacje W3C: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Zauważ, że jest to coś, co dopiero niedawno pojawiło się w CSS jako funkcja. Jest on dostępny, ale duża liczba przeglądarek tam nie będzie wspierać go jeszcze, a te, które obsługują to będzie wymagało od przedrostka sprzedawcy (tj -webkit-filter:, -moz-filteritp).

Możliwe jest również wykonanie takich efektów filtrów za pomocą SVG. Obsługa SVG dla tych efektów jest dobrze ugruntowana i szeroko obsługiwana (specyfikacje filtrów CSS zostały zaczerpnięte z istniejących specyfikacji SVG)

Należy również zauważyć, że nie należy tego mylić z zastrzeżonym filterstylem dostępnym w starszych wersjach IE (chociaż mogę przewidzieć problem ze zderzeniem przestrzeni nazw, gdy nowy styl opuszcza prefiks dostawcy).

Jeśli nic z tego nie działa, możesz nadal korzystać z istniejącej opacityfunkcji, ale nie w sposób, w jaki myślisz: po prostu utwórz nowy element z jednolitym ciemnym kolorem, umieść go na obrazie i zaniknij za pomocą opacity. Efektem będzie przyciemnienie obrazu.

Wreszcie możesz sprawdzić filter tutaj obsługę przeglądarek .

— Spudley
źródło

32

OP chce zmniejszyć jasność, a nie ją zwiększyć. Krycie sprawia, że obraz wygląda na jaśniejszy, a nie ciemniejszy.

Możesz to zrobić, nakładając czarny element div na obraz i ustawiając jego krycie.

<style>
#container {
    position: relative;
}
div.overlay {
    opacity: .9;
    background-color: black;
    position: absolute;
    left: 0; top: 0; height: 256px; width: 256px;
}
</style>

Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
    <div class="overlay"></div>
    <img src="http://i.imgur.com/G8eyr.png">
</div>

PRÓBNY

— sachleen
źródło

24

Krycie nie sprawia, że nic nie jest jaśniejsze ani ciemniejsze. Zmienia przezroczystość obiektu. To, czy spowoduje to rozjaśnienie lub przyciemnienie czegoś, zależy od koloru tła za elementem, którego krycie zmieniasz. W przeciwieństwie do tego, co mówisz, możesz przyciemnić coś, zwiększając krycie, jeśli umieścisz to na czarnym tle. Przezroczysty w 99% obraz na czarnym tle będzie prawie czarny. Dlatego nie rozumiem, dlaczego wymagany jest oddzielny element div nakładki. Możesz po prostu ustawić go na czarnym BG. Np .: jsbin.com/isemec/1/edit

— NickG

@NickG Powiedziałem, że zakładając białe tło. To, co zrobiłeś, jest tym samym, co mój kod, tyle że nałożyłem półprzezroczystą czarną nakładkę na obraz, a masz nieprzezroczyste czarne tło z półprzezroczystym obrazem na górze.

— sachleen

17

Krótko mówiąc, umieść czerń za obrazem i zmniejsz opactiy. Możesz to zrobić, zawijając obraz w element div, a następnie zmniejszając krycie obrazu.

Na przykład:

<!DOCTYPE html>

<style>
    .img-wrap {
        background: black;
        display: inline-block;
        line-height: 0;
    }
        .img-wrap > img {
            opacity: 0.8;
        }
</style>

<div class="img-wrap">
    <img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>

Oto JSFiddle.

— JL235
źródło

15

Możesz użyć:

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);

— Nahomy Atias
źródło

9

Ta zasada „rzućmy prefiksy na wszelki wypadek” jest błędna. Po pierwsze, jeśli Opera kiedykolwiek ją obsługuje, nie będzie miała -o-(Opera używa teraz Webkit / Blink), po drugie, Firefox wskoczył prosto do bez prefiksu filter, po trzecie, masz niewłaściwą kolejność, bez prefiksu powinien być ostatni, czwarty, składnia IE -ms-filterjest inna ( progid:DXImageTransformitd.), po piąte, składnia przeglądarki Firefox jest inna i wymaga SVG ( patrz dokumentacja ), po szóste, nowe funkcje prawdopodobnie nie będą poprzedzone prefiksem, ponieważ dostawcy zdali sobie sprawę, jak zły był to pomysł

— Camilo Martin

5

@CamiloMartin, to powinieneś był udzielić bardziej kompletnej odpowiedzi na to pytanie, ponieważ nie została jeszcze udzielona pełna odpowiedź.

— Wes Modes

-webkit-filter: Brightness () / -webkit-filter: kontrast () działa. To trafna odpowiedź na to pytanie.

— Shilpa

możesz go użyć w miksie

— Erez Lieberman

6

Dzięki CSS3 możemy łatwo dostosować obraz. Ale pamiętaj, że to nie zmienia obrazu. Wyświetla tylko dostosowany obraz.

Więcej szczegółów znajdziesz w poniższym kodzie.

Aby zmienić kolor obrazu na szary:

img {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
}

Aby uzyskać efekt sepii:

    img {
     -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
}

Aby dostosować jasność:

 img {
     -webkit-filter: brightness(50%);
     -moz-filter: brightness(50%);  
  }

Aby dostosować kontrast:

 img {
     -webkit-filter: contrast(200%);
     -moz-filter: contrast(200%);    
}

Aby rozmyć obraz:

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }

— Raj Sharma
źródło

1

Nie publikuj dokładnie tej samej odpowiedzi na wiele pytań: albo nie jest to dobre rozwiązanie dla wszystkich, albo pytania są duplikatami, które powinny zostać oznaczone / zamknięte jako takie.

— kleopatra

3

Znalazłem to dzisiaj. Naprawdę mi pomogło. http://www.propra.nl/playground/css_filters/

Wszystko, czego potrzebujesz, to dodać to do swojego stylu css .:

div {-webkit-filter: brightness(57%)}

— Duch w ruchu
źródło

2

Jeśli masz obraz tła, możesz to zrobić: Ustaw gradient rgba () na obrazku tła.

.img_container {
  float: left;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1px solid #fff;
}

.image_original {
  background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.image_brighness {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
  url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.img_container p {
  color: #fff;
  font-size: 28px;
}

<div class="img_container image_original">
  <p>normal</p>
</div>
<div class="img_container image_brighness ">
  <p>less brightness</p>
</div>

Rozwiń fragment

— Sébastien Gicquel
źródło

doskonały. Potrzebowałem rozwiązania, aby przyciemnić obraz tła, a wszystkie inne odpowiedzi przyciemniły cały div.

— nuander

1

Możesz użyć filtrów css, poniżej i przykładu dla zestawu web-kit. proszę spojrzeć na ten przykład: http://jsfiddle.net/m9sjdbx6/4/

    img { -webkit-filter: brightness(0.2);}

— GibboK
źródło

0

-webkit-filter: brightness(0.50);

Mam to fajne rozwiązanie: https://jsfiddle.net/yLcd5z0h/

— Prashant Ghimire
źródło

0

spróbuj tego, jeśli chcesz przekonwertować czarny obraz na biały:

.classname{
    filter: brightness(0) invert(1);
}

— Rizo
źródło

-3

Lubić

.classname
{
 opacity: 0.5;
}

— Satinder singh
źródło

dzięki, ale to zwiększenie jasności, a nie zmniejszenie jej !!

— Shadi,

To zależy od koloru tła.

— apokalipsa

prawo @zgnilec to zależy od koloru tła ... jeśli ustawisz go na czarno jasność obrazu zostanie zmniejszona

— Shadi

to nie działa przy zwiększaniu jasności o więcej niż 100%, krycie może wzrosnąć tylko do 1

— Javis Perez

Ponieważ nie mówię po angielsku, tak naprawdę chciałem wyszukać „krycie” i mimo wszystko zaproponowano mi tę odpowiedź. Nawet jeśli ta odpowiedź nie odpowiada na pytanie, dobrze jest wiedzieć, że opacityzwiększa jasność. ;)