无需调整大小的 CSS 背景图像过渡答案

【问题标题】：CSS background image transition without resizing无需调整大小的 CSS 背景图像过渡
【发布时间】：2015-07-20 13:01:11
【问题描述】：

请看here

transition: background-image 2s;

背景图片大小不一，过渡效果难看。是否可以仅使用 CSS 来淡化图像而不调整大小？

【问题讨论】：

标签： css background-image transition

【解决方案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>

【讨论】：

我认为这是唯一的解决方案，但它使用的是 javascript。我只能编辑css文件:(
CSS 动画怎么样？
@Denni007 这些是你要找的吗？