Przyciemnienie obrazka css

pytanie zadane 23 marca 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

czesc szukam odpowiedzi na necie i zadna nie jest odpowiednia.

Wie ktos jak zrobić takie przyciemnienie na img? Jak tutaj https://cdn-images-1.medium.com/max/1200/1*Aq7TXpuzXp8lTX0Dhxw_DQ.png

5 odpowiedzi

odpowiedź 23 marca 2017 przez imklau Nałogowiec (42,090 p.)

jeśli ten obrazek jest tak na stałe przyciemniony to nie można tego po prostu zrobić w jakimś programie typu GIMP?
ewentualnie w CSS to pewnie by trzeba było się pobawić :after

komentarz 23 marca 2017 przez Vorex444 Dyskutant (9,610 p.)

Własnie tak mysłałem zeby w PS zrobić tak ale miałem nadzieje ze jeszcze jest jakas opcja łatwa i prosta w css do tego :D

komentarz 23 marca 2017 przez imklau Nałogowiec (42,090 p.)

szczerze mówiąc to wydaje mi się, że lepiej to robić w programie ;p chyba, że w jakiejś sytuacji chciałbyś żeby tło wróciło do normalnego koloru ;p
masz tutaj w css przykład: http://codepen.io/noeemi/pen/JWZGyx

komentarz 23 marca 2017 przez pablop76 VIP (123,120 p.)
edycja 23 marca 2017 przez pablop76

Witam. Można nałożyć na img nakladkę z bg rgba;

<div class="baner">
<img src="https://jonny.me/img/homeslider.jpg" />
<div class="bg"></div>
</div>

.baner{
position: relative;
width: 100%;
height: 500px;
display: block;
overflow: hidden;
}
.bg{
position: absolute;
display: block;
background-color: rgba(22, 42, 191, .5);
width: 100%;
top: 0;
bottom: 0;
}
img{
width: 100%;
height: auto;
}

1	komentarz 23 marca 2017 przez Kamil Naja Nałogowiec (27,410 p.) przywrócone 23 marca 2017 przez Kamil Naja Filtr Brightness https://developer.mozilla.org/en-US/docs/Web/CSS/filter

odpowiedź 23 marca 2017 przez pablop76 VIP (123,120 p.)

odpowiedź 23 marca 2017 przez hoktaur Pasjonat (22,250 p.)

odpowiedź 23 marca 2017 przez Artek Stary wyjadacz (11,800 p.)

odpowiedź 23 marca 2017 przez Jacque Obywatel (1,300 p.)

Jest opcja taka jak "opacity" przykład:img {opacity: 0.5;} wartość przyciemnienia jest podawana w ułamkach dziesiętnych.0.5 odpowiada 50%.

Mam nadzieje, że o to Ci chodziło

Pozdro :)

komentarz 23 marca 2017 przez imklau Nałogowiec (42,090 p.)

tyle tylko, że opacity da przezroczystość na wszystkich elementach, czyli np tekście również ;p

komentarz 23 marca 2017 przez hoktaur Pasjonat (22,250 p.)

Wszystko zależ jak sobie to ustawisz w CSS

<!DOCTYPE html>
<html>
<head>
<style>
.container {
	background-color: black;
	width: 500px;
    color: white;
    position: relative;
}
.container > img {
    opacity: 0.5;
    width: 100%;
}
.container > h1 {
	position: absolute;
    top: 40%;
    left: 10%;
}
</style>
</head>
<body>
<div class="container">
	<img src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
    <h1>To jest jakiś tam text</h1>
</div>

</body>
</html>