Фон или картинку на картинку CSS

#css #css3

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

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

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









    

Ответы

Ответ 1

Здесь для наглядности сделал градиент. Если вы не знали то в 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)
}





Ответ 2

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

Допустим есть 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%;
}




Ответ 3

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

opacity: .7;


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