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

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

вопрос

Добрый день, есть 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, спасибо тебе огромное, очень выручил

Gordi | Telegram Sender ¹²

Gordi
Telegram Sender
Вчера, 15:47

купил. Модуль классный! Автору большая признательность!
TeraMoune | Как вывести тайтл и дискрипшен по маске ... ¹

TeraMoune
Как вывести тайтл и дискрипшен по маске в категориях?
14-04-2024, 00:36

Ну например вот так: https://lazydev.pro/product/12-dle-seo.html
zawibis | Как настроить редирект на внешние сайты? ¹

zawibis
Как настроить редирект на внешние сайты?
13-04-2024, 14:53

Нашёлся ответ.
Нужно в настройках группы отключить параметр

Автоматическая замена ссылок [url] в тег [leech]
При включении данной опции все ссылки, которые пользователь публикует в теге [url], будут автоматически заменены на защищенные ссылки тега [leech]
TeraMoune | Как решить проблему с /xfsearch/значение ... ⁵

TeraMoune
Как решить проблему с /xfsearch/значение?
12-04-2024, 11:53

Это не прикол, просто dle позволяет искать новости как по значению так и с указанием конкретного поля для этого значения. И если у вас стоят метрики на сайте то достаточно любому человеку открыть ссылку и убрать в ней что-то, если сайт при новом url вернёт статус 200 то метрики захотят этот url запомнить.
komosa | Как решить проблему с /xfsearch/значение ... ⁵

komosa
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:34

А вот прикол то в том, что это коснулось только author
lutskboy | Как решить проблему с /xfsearch/значение ... ⁵

lutskboy
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:31

может быть не один только author. и другие поля. как знать куда перенаправлять
komosa | Как решить проблему с /xfsearch/значение ... ⁵

komosa
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:25

Проблема заключается не в регистре, а в названии /author/ пропадает, и получается так, что ссылки дублируются. Как сделать редирект с дубля /xfsearch/Имя Фамилия на правильный адрес /xfsearch/author/имя фамилия ?
lutskboy | Как решить проблему с /xfsearch/значение ... ⁵

lutskboy
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:23

в новых версиях переводит в один регистр. либо xfsearch translit плагин
deadluk | Сайт для чтения манги ²

deadluk
Сайт для чтения манги
9-04-2024, 04:23

с ТЗ ознакомился. есть также вариант написать на typescript
deadluk | Сайт для чтения манги ²

deadluk
Сайт для чтения манги
9-04-2024, 04:10

пишите https://t.me/CheapestSir обсудим. можем сделать и на dle (php), а можем высокопроизводительное решение на C# (ASP.NET Core). полностью готовый сайт прод ключ. будет соответствовать ТЗ. c# идеально подохдоит для высоконагруженных проектов.