背景图像不适用于过渡

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

过渡更适合过渡的属性。 试试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:属性来修复它，同时使用 color 和 url，而不是单独的background-color用于颜色转换和background-image用于图像一。

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

谢谢大家！

---