3

Подскажите самый простой и кроссбраузерный вариант наложения фона или картинки на картинку. Нужно тупо затемнить.

Гуглил - но там черт ногу сломит. Нужно что-то простое, а предлагают и текст засунуть, и иконки, и кучу всего.

В идеале я бы сделал свой фон для наложения, но не знаю как впихнуть.

<div>
<a data-title="title" data-lightbox="group-10" href="http://gdefon.org/_ph/8/1/478317672.jpg"><img class="" alt="alt" title="title" src="http://gdefon.org/_ph/8/1/478317672.jpg"></a>
</div>

3 ответа 3

5

Для наложения картинок друг на друга нужно взять элементы и наложить их друг на друга (к примеру с помощью абсолютного позиционирования). Верхние элементы должны быть полупрозрачными.

Допустим есть 2 картинки:

Природа 1

Природа 2

Демонстрация:

body {
  /* необязательные стили для демонстрации */
  margin: 0;
}

.image-overlapping {
  /* устанавливаем размеры контейнера */
  width: 100vw;
  height: 100vh;
  background-image: url("https://i.stack.imgur.com/DqIv7.jpg");
  /* делаем чтобы картинка полностью растягивалась, необязательный стиль */
  background-size: 100% 100%;
  /* позиционирование относительно контейнера */
  position: relative;
}

.image-overlapping:after {
  content: "";
  
  /* абсолютное позиционирование */
  position: absolute;
  /* растягиваем на всю ширину и высоту */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* добавляем полупрозрачность */
  opacity: 0.7;
  /* делаем чтобы полупрозрачный элемент располагался поверх основного блока */
  z-index: 1;
  background-image: url("https://i.stack.imgur.com/bleHC.jpg");
  /* делаем чтобы картинка полностью растягивалась, необязательный стиль */
  background-size: 100% 100%;
}
<div class="image-overlapping">
</div>

4

Здесь для наглядности сделал градиент. Если вы не знали то в css можно перечислять свойства так свойство: значение , значение2 т.е. через запятые. первое значение самое высокое, затем второе оно выше третьего и.т.д.

.darker {
width:300px;
height:300px;
background:linear-gradient(to right, transparent 50%, rgba(0,0,0,0.5) 0), url(http://gdefon.org/_ph/8/1/478317672.jpg)
}
<div class="darker">

</div>

7
  • А картинку на картинку так можно? 28 июл 2017 в 8:26
  • К сожалению свойства background-opacity пока нет но есть псевдоэлементы
    – user245150
    28 июл 2017 в 8:30
  • @Duoxx Воу , этот вариант возьму для шапки. А можно как то натянуть фон на мою структуру html ? Я использую lightbox и мне этот эффект нужен при наведении , так как в lightbox такие эффекты отсутствуют , а для галереи одного pointer не достаточно.
    – Xzizz
    28 июл 2017 в 10:55
  • Полностью натянуть?
    – user245150
    28 июл 2017 в 11:14
  • 1
    Натянуть в смысле чтобы затемнить а не наполовину?
    – user245150
    28 июл 2017 в 11:32
1

Контейнер сверху, а на него черный БГ, с прозрачностью неполной,

opacity: .7;

Числа можно писать без нуля. 1-непрозрачный, 0 полностью прозрачный

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.