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

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

вопрос

Добрый день, есть background-image, в стилях прописана так:

.kartinka-img     { width: 220px; height: 135px; background-size: cover; background-repeat: repeat-y;}

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

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

11 комментариев

Юзер

1599

FastFud - 2014-06-1818 июля 2014 20:09 - #32021

так может:

.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);}

Юзер

243

follor - 2014-06-1818 июля 2014 20:30 - #32024

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

Юзер

1599

FastFud - 2014-06-1818 июля 2014 20:33 - #32025

.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;}

Юзер

243

follor - 2014-06-1818 июля 2014 20:36 - #32026

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

Юзер

243

follor - 2014-06-1818 июля 2014 20:51 - #32033

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

Юзер

1599

FastFud - 2014-06-1818 июля 2014 20:56 - #32036

.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;}

Моя ошибка ))

Юзер

243

follor - 2014-06-1818 июля 2014 21:09 - #32043

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

Юзер

1599

FastFud - 2014-06-1818 июля 2014 21:12 - #32046

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

Юзер

243

follor - 2014-06-1818 июля 2014 21:22 - #32048

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

Юзер

1599

FastFud - 2014-06-1818 июля 2014 21:25 - #32050

Дайте html код

Юзер

243

follor - 2014-06-1818 июля 2014 21:25 - #32051

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

non-stop | Как решить проблему индексации DLE в пои ... ¹

non-stop
Как решить проблему индексации DLE в поиске Bing?
19-12-2024, 17:02

Забыл написать что обновился до последней версии 17.3
Интересно узнать, это только у меня проблема, или это проблема движка? проверьте свои сайты на наличие в поиске Bing.
В 11 винде именно эта поисковая система стоит по умолчанию . кроме того эта же поисковая система отвечает за индекс еще одного поисковика - yahoo. Эти системы могут давать дополнительный процент пискового трафика на сайты.
lutskboy | Как максимально грамотно организовать до ... ¹

lutskboy
Как максимально грамотно организовать добавление материалов через SQL-запросы?
18-12-2024, 21:39

все верно. related_ids автоматом заполняется потом.
derebas | Убираем xfsearch из адресной строки ⁷

derebas
Убираем xfsearch из адресной строки
16-12-2024, 02:35

в правилах транслитерации для tagvalue поставьте замену " " => "-", например так
str_replace(array('.', ' ', '/', '&', "'", '+', '«', '»', ':', '!'), array('', '-', '-', 'and', '', '', '', '', '', '')
toxicpioner | Убираем xfsearch из адресной строки ⁷

toxicpioner
Убираем xfsearch из адресной строки
15-12-2024, 19:31

если в доп поле есть пробел, будет выдавать просто 403 стр
dj-avtosh | Воспользовался хаком удаление html из ад ... ²

dj-avtosh
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
12-12-2024, 17:26

Нужно правило с year поднять выше всех в .htaccess
TeraMoune | Воспользовался хаком удаление html из ад ... ²

TeraMoune
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
11-12-2024, 22:12

У вас убрано слишком много отличительных признаков в ссылках и теперь ссылки пересекаются. Убрали xfsearch, убрали html, а так же зачем то убрали дефиз разделяющий id и alt_name. Теперь некоторые ссылки будут отвечать выражению под правила ссылок новостей. Исправить вы можете только переосмыслив эти ссылки и добавить в них каких-то отличительных особенностей, переосмыслить чпу.
toxicpioner | Как упорядочить ID новостей ¹⁹

toxicpioner
Как упорядочить ID новостей
9-12-2024, 22:24

***Комментарий удален***
DnCnv | Как показать только одну категорию, к ко ... ¹

DnCnv
Как показать только одну категорию, к которой принадлежит новость?
9-12-2024, 01:46

***Комментарий удален***
web102 | Почему не отображается картинка в галере ... ³

web102
Почему не отображается картинка в галерее?
4-12-2024, 11:49

дайте адрес сайта. можно в личку
Shandi | Почему не отображается картинка в галере ... ³

Shandi
Почему не отображается картинка в галерее?
3-12-2024, 08:53

Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?