Question

这是代码，因为一张图像是无背景的png，一张是有背景的，所以我想知道图像是如何重叠的？我怎么知道哪些图像将要重叠，哪些图像将位于下面？仅当我将其作为JPEG图像时，才会显示第一个背景吗？

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
    background-image: url(https://i.stack.imgur.com/ark1Z.gif), url(https://i.stack.imgur.com/YG4vz.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>
</head>
<body>

<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Answer 1

背景图像绘制在顶部的堆叠上下文层上彼此。指定的第一层将被绘制为最接近用户。

More information

多个背景图像如何相互重叠？它们是否按照定义的顺序真正相互重叠？

1 个答案: