Как реализовать плавную смену фоновых изображений?

Question

[Dymok]

Пытаюсь сверстать макет, в котором есть слайдер с изображениями в фоне. Сделал все, но не получается нормально реализовать смену изображений, вот что есть на данный момент.
Хочу чтобы одно изображение растворялось в другом. Пытался делать через opacity, но тогда пропадает весь контент блока.

Answer 1

[Степан Крапивин]

Лучше сделать не смену фона у одного блока, а несколько блоков, каждый с уникальным фоном. А скрытие и отображение блоков сделать через плавную смену opacity.

Типа так:

<section id="slider">
  <div class="slider__item" style="background-image: url("../slider/img/intro-slide-1.jpg"); opacity: 0">
  <div class="slider__item" style="background-image: url("../slider/img/intro-slide-2.jpg"); opacity: 1">
  <div class="slider__item" style="background-image: url("../slider/img/intro-slide-3.jpg"); opacity: 0">
  ...прочее содержимое
</section>

Answer 2

[Артем Спиридонов]

Если оно в фоне, то через opacity растворить не получится. Разве что подкладывать "предыдущее" изображение абсолютным позиционированием.

Два дива - "текущий" и "следующий", у них два фона, текущий растворяется в следующий, потом они моментально меняются фонами.

Похожий вопрос: https://stackoverflow.com/questions/41152161/opaci...

Comments

[Dymok]

Пытаюсь сделать разметку и стили для такого способа, но могу понять, как правильно расположить все слайды в фоне, друг на друге. Это делается как-то по-другому?
https://codepen.io/anon/pen/EQpByd

[Артем Спиридонов]

Абсолютным позиционированием на CSS.

[Dymok]

Артем Спиридонов, кажется всё понял, спасибо.

Answer 3

[Илья Канышев]

Каким образом вы хотите сделать смену слайдов?

Comments

[Dymok]

Смена слайдов уже есть, но эффект смены таким образом получается некрасивый, хочу чтобы одно как бы растворялось в другом

[Илья Канышев]

UnluckySerivelha, в таком случае надо загружать картинки вместе с сайтом. После полной загрузки страницы менять их opacity, причем каждая картинка должна быть друг под другом.
Это реализовать не так то и сложно. Необходима в этом помощь?