Question

我正在尝试使用CSS在两个不同的背景图像之间进行过渡。

它适用于诸如背景颜色的属性，但是图像之间的过渡是突然的，不适用于过渡属性。由于我的元素位于一个css网格中，该网格的大小可以在不同的设备中更改，因此我不能仅在其中创建另一个div并为其使用不透明度，因为大小...

    .logo_div{
        height: 100%;
    }
    .logo_grid{
        display: grid;
        grid-template: 1fr 1fr / 1fr 1fr;
    }
    .logo_box{
        background-image: url('...');
        background-size: cover;
        width: 100%;
        transition: background-image 1s ease;
        &:hover{
            background-image: none;
        }
    }

    <div style="margin-left: auto; margin-right: auto; height: 300px; width: 300px;"> %This size can be different depending on the page
        <div class="logo_div logo_grid">
           <div class="logo_box"></div>
        </div>
    </div>

我希望背景图片能过渡到无，但是突然。

Answer 1

Transition一个更适合过渡的属性。尝试使用opacity ...提示：默认情况下，不透明度值为1。

.logo_box {
  background-image: url('https://picsum.photos/300/200');
  background-size: cover;
  width: 300px;
  height: 200px;
  transition: opacity 1s ease;
}
.logo_box:hover {
  opacity: 0;
}

<div class="logo_box"></div>

Answer 2

尝试一下

 .logo_box:hover{
  background-image:none;

}

Answer 3

非常感谢大家的帮助。万一您处于我的状况并且您不能（或可能不知道如何）处理混浊，我有一个解决方案：

我使用带有颜色和网址的 background：属性修复了该问题，而不是使用单独的 background-color 进行了颜色过渡和 background-image 强>为形象之一。

所以现在我的过渡是在两个div之间，一个是初始颜色和我的图像，第二个是在第二背景颜色和透明png之间。

谢谢大家！

背景图片不适用于过渡

3 个答案: