CSS переход фонового изображения без изменения размера

Question

пожалуйста посмотри here

transition: background-image 2s; 

фоновых изображений имеют разные размеры и эффект перехода некрасиво. Можно ли исчезать изображения без изменения размера только с помощью CSS?

Answer 1

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

var current = 0; 
 
setInterval(function() { 
 
    document.querySelector('.image2').style.opacity = (current++ % 2); 
 
}, 3000);

.image1,.image2 { 
 
    width: 600px; 
 
    height: 370px; 
 
    border: 1px solid; 
 
    background-color: white; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: contain; 
 
    transition: opacity 2s; 
 
} 
 
.image1 { 
 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png'); 
 
} 
 
.image2 { 
 
    margin-top: -370px; 
 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/83/CSS-Logo.png'); 
 
}

<div class="image1"></div> 
 
<div class="image2"></div>

Или, с CSS animation вместо JavaScript:

@keyframes fade { 
 
    0% { opacity: 0; } 
 
    10% { opacity: 0; } 
 
    40% { opacity: 1; } 
 
    60% { opacity: 1; } 
 
    90% { opacity: 0; } 
 
    100% { opacity: 0; } 
 
} 
 
.image1,.image2 { 
 
    width: 600px; 
 
    height: 370px; 
 
    border: 1px solid; 
 
    background-color: white; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: contain; 
 
} 
 
.image1 { 
 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png'); 
 
} 
 
.image2 { 
 
    margin-top: -370px; 
 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/83/CSS-Logo.png'); 
 
    animation: fade 5s linear infinite; 
 
}

<div class="image1"></div> 
 
<div class="image2"></div>