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

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

вопрос

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

TeraMoune | Как отключить миниатюры стандартной гале ...
TeraMoune
Как отключить миниатюры стандартной галереи Fancybox?
Сегодня, 06:00
В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

Например: параметр Thumbs: false отключает миниатюры.
```
Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
```
derebas | Как реализовать шифрование трафика? ³

derebas
Как реализовать шифрование трафика?
18-11-2024, 16:52

Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:46

я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
Так и было...
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:39

чтоб не удалять выстави права и пользователя какие там идут на файлы. .
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:37

т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
Видосы в директории upload можно хоть оставить? их там 80 Гб
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:17

фтп обычный юзер а не root
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:15

дэк только так и загружаю
Gordi | Как реализовать шифрование трафика? ³

Gordi
Как реализовать шифрование трафика?
18-11-2024, 14:14

я тоже не понимаю....товарищ один, представитель хостинга сказал, что даже есть модули такие специальные под популярные цмс
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:13

Gordi,
через фтп загружай
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:11

Привет Николай!
Всегда загружал от root... посмотришь может? твой плагин тоже не виден ((
или направь на путь истинный, пжст