背景图像过渡不起作用，但背景颜色可以

Question

我设置了一个导航菜单，当您将鼠标悬停在链接上时，该菜单会更改正文背景。我想添加一些缓动来软化过渡。当我只使用背景颜色时，它就有效。当我将其切换为图像时，它不会。需要明确的是，图像显示了，但过渡却没有。我不明白为什么一个有效而另一个无效。

这是我使用的js和css -

<script>

var body = document.body;

var hover_element = document.getElementById("link1");

hover_element.addEventListener("mouseover", function() {
    body.style.backgroundImage = "url(my_image_url_is_here)";
});

</script>

body {
   transition: background-image 0.5s ease-in-out;
}

Answer 1

CSS 中不支持背景图像作为可动画属性（“过渡”）：https://www.w3.org/TR/css-transitions-1/#animatable-properties

我认为更好的方法是有两个重叠的 div，其中一个带有图像背景，然后将顶部的不透明度降低到零。