javascript - 淡入 div 的背景图像(不是主体或淡出背景颜色)

Question

很简单，我试图淡化一个 div 的背景图像；我已经看到这是用两个 div 完成的，并且通过淡化覆盖背景图像的 div 的背景颜色来有效地显示(即:虚假淡入)背景图像。这不会解决我的问题。

如果“ mask ”与主体背景颜色为相同的纯色，则上述解决方案有效。在我的例子中， body 的背景是带纹理的图像，所以这不起作用。我可以将“ mask ”div 设置为与主体具有相同的背景图像，但使用 z 索引的 div 似乎有点过分了。

tl;dr 我在 body 某处有一个 div -- 我如何淡入其背景图像？谢谢!

Answer 1

您需要两个 div。第一个没有背景颜色，第二个有背景图像。淡出第二个(Asherlc 提出了一种方法)，你就完成了。

.body {background-image:url(bg.png)}
.toFade {opacity=1 ... alternatives }
...

<div>
    <div class=toFade style="background-image:url(img.png)">
        <!-- possible content -->
    </div>
</div>