Как затемнить изображение на css?

Question

[Zadavajka]

Как слегка затемнить изображение как в примере? И реально ли так сделать на CSS?

Answer 1

[Алексей Уколов]

https://css-tricks.com/vignetting-woes/
jordandobson.com/_expirements/css/vignette

Answer 2

[Александр Зачиналов]

Самый поддерживаемый способ - наложить поверх блок с черным фоном и необходимой прозрачностью, все остальные способы не такие кроссбраузерные или полезные, например использование inset-теней до сих пор в некоторых браузерах вызывает сильные тормоза. Если вы заботитесь о своих посетителях, а баннер не будет меняться каждый день, делайте такие эффекты сразу в фотошоп, единоразово или создав шаблон (мокап) с этой подложкой на будущее.

Comments

[Сергей Горячев]

Я бы картинку положил поверх черного дива и сделал её прозрачность.
В браузерах, где вдруг не работает opacity (хотя rgba() и работает почти везде), хотя бы не было черного дива на странице.

[Александр Зачиналов]

IE9+ =)

[Александр Зачиналов]

согласен, но самый надежный способ все-таки делать исходник уже в нужном виде

[Zadavajka]

спасибо, но мне именно нужно было затемнить только в определённых местах, а не везде, но всё равно интересный способ полезно знать :)

[rememberMEguys]

background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(images/marvel/11.jpg);

Answer 3

[I_Wizard]

img{ 
opacity:0.8;
-moz-opacity:0.8;
filter: alpha(opacity=80) black;
-khtml-opacity: 0.8;
background-color:#000;
}

Пробуйте так. работает хорошо.

Comments

[Антон Вебсайтовский]

не работает.

Answer 4

[Alan Khab]

Я делаю так:
div (foto) c фоном фотографией помещаю в div (foto_box) с черным фоном и при наведении курсора срабатывает opacity

Стили:
.foto_box{width:300px;height:200px;float:left;background-color:#000000;}
.foto{width:300px;height:200px;float:left;background-image:url(foto.jpg);background-repeat:no-repeat;}
.foto:hover {opacity:0.8;}

Answer 5

[Антон Вебсайтовский]

Вот так работает, но надо в div обернуть. хотел без дива сделать.

.aki {
  position: relative;
}
.aki::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: rgb(0, 0, 0, 0.5);
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(0, 0, 0, 0.5)), color-stop(30%, rgb(255, 255, 250, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0, 0.5) 0%, rgb(255, 255, 250, 0) 30%);
}

Comments

[Антон Вебсайтовский]

низ фото затемнено.