Не нравятся результаты поиска? Попробуйте другой поиск!

Затемнение background изображения


     18.07.2014    Общие вопросы, Стили (CSS)    5020

вопрос
Добрый день, есть background-image, в стилях прописана так:
.kartinka-img     { width: 220px; height: 135px; background-size: cover; background-repeat: repeat-y;}

и вопрос, как её слегка затемнить, или наложить цвет с прозрачностью? Фон сайта белый, и с opacity это сделать не получается.

Ответа пока нет


Комментарии пользователей (11)

FastFud
50

1599 | 588

FastFud - 18 июля 2014 20:09 - Юзер

так может:
.kartinka-img  { width: 220px; height: 135px; background-size: cover; background-repeat: repeat-y;}
.kartinka-img:before {content: "";position:absolute;width: 100%;height: 100%;background: rgba(0,0,0,0.5);}

follor
1

243 | 10

follor - 18 июля 2014 20:30 - Юзер

оно то так, но картинка затемнена постоянно, а нужно чтобы при наведении была обычной, светлой

FastFud
50

1599 | 588

FastFud - 18 июля 2014 20:33 - Юзер

.kartinka-img  { width: 220px; height: 135px; background-size: cover; background-repeat: repeat-y;transition: all 0.4 ease;-webkit-transition: all 0.4 ease;-moz-transition: all 0.4 ease;-o-transition: all 0.4 ease;}
.kartinka-img:before {content: "";position:absolute;width: 100%;height: 100%;background: rgba(0,0,0,0.5);}
.kartinka-img:hover:before {opacity: 0;transition: all 0.4 ease;-webkit-transition: all 0.4 ease;-moz-transition: all 0.4 ease;-o-transition: all 0.4 ease;}

follor
1

243 | 10

follor - 18 июля 2014 20:36 - Юзер

FastFud, спасибо огромнейшее, то что нужно.

follor
1

243 | 10

follor - 18 июля 2014 20:51 - Юзер

только почему то плавности нет, цвет меняется резко, без перехода

FastFud
50

1599 | 588

FastFud - 18 июля 2014 20:56 - Юзер

.kartinka-img  { width: 220px; height: 135px; background-size: cover; background-repeat: repeat-y;}
.kartinka-img:before {transition: all 0.4s ease;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;content: "";position:absolute;width: 100%;height: 100%;background: rgba(0,0,0,0.5);}
.kartinka-img:hover:before {opacity: 0;transition: all 0.4s ease;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;}
Моя ошибка ))

follor
1

243 | 10

follor - 18 июля 2014 21:09 - Юзер

FastFud, теперь всё в норме, отлично, и последняя просьба, если не затруднит помочь, как сделать чтобы эта же картинка смещалась в верх при наведении вместе с осветлением, если это конечно возможно? просто прописать в .kartinka-img:hover:before background-position: 0px -135px; не прокатывает

FastFud
50

1599 | 588

FastFud - 18 июля 2014 21:12 - Юзер

.kartinka-img:hover {margin-top: -15px;}

follor
1

243 | 10

follor - 18 июля 2014 21:22 - Юзер

так смещается весь блок, картинка, вместе с заголовком и остальным, нужно сместить именно background

FastFud
50

1599 | 588

FastFud - 18 июля 2014 21:25 - Юзер

Дайте html код

follor
1

243 | 10

follor - 18 июля 2014 21:25 - Юзер

всё, разобрался сам, FastFud, спасибо тебе огромное, очень выручил

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы