我需要在浏览器上显示屏幕保护程序。屏幕保护程序应包含静态图像和动态图像两部分。移动图像有一些建筑物，在没有建筑物的剩余区域 (262 x 192) 中它是透明的。代码如下。
<!DOCTYPE html>
<html>
<head>
<title>Moving Screen Saver</title>
<style>
html, body {
position: relative;
height: 100%;
width: 100%
}
#bgimg {
background-image: url("background/background2.jpeg");
position: absolute;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
#bdgimg {
background-image: url("buildings/bdg2.jpeg");
opacity: 0.5;
position: absolute;
background-repeat: no-repeat;
bottom: 0px;
left : 0px;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="bgimg">
</div>
<div id="bdgimg">
</div>
</body>
</html>
正在显示第二张图片。但是代替透明区域，显示了一些颜色而不是透明的。我尝试了不同的不透明度值但没有用。谁能帮我解决这个问题。
最佳答案
希望这对您有所帮助，将以下属性添加到您的 css
#bdgimg {
background-color:transparent;
}
如果没有它也能正常工作，您的图像可能存在其他问题。
编辑 这是一个演示。
<!DOCTYPE html>
<html>
<head>
<title>Moving Screen Saver</title>
<style>
html, body {
position: relative;
height: 100%;
width: 100%
}
#bgimg {
background-image: url("https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg");
position: absolute;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
#bdgimg {
background-image: url("https://cdn.pixabay.com/photo/2017/12/05/09/12/business-2998905_960_720.png");
opacity: 1;
position: absolute;
background-repeat: no-repeat;
bottom: 0px;
left : 0px;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="bgimg">
</div>
<div id="bdgimg">
</div>
</body>
</html>关于css - 如何使用 CSS 在另一个图像之上显示图像(透明)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49744540/