如何使用CSS在另一个图像上显示一个图像（透明的）
我需要在浏览器上显示屏幕保护程序。屏幕保护程序应该包含静态图像和动态图像两部分。运动图像有一些建筑物，并且在建筑物不存在的剩余区域（262 x 192）是透明的。代码如下如何使用CSS在另一个图像上显示一个图像（透明的）,css,html,Css,Html,我需要在浏览器上显示屏幕保护程序。屏幕保护程序应该包含静态图像和动态图像两部分。运动图像有一些建筑物，并且在建筑物不存在的剩余区域（262 x 192）是透明的。代码如下 <!DOCTYPE html> <html> <head> <title>Moving Screen Saver</title> <style> html, body {
<!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>
移动屏幕保护程序
html，正文{
位置：相对位置；
身高：100%；
宽度：100%
}
#bgimg{
背景图像：url（“background/background2.jpeg”）；
位置：绝对位置；
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
身高：100%；
}
#bdgimg{
背景图像：url（“buildings/bdg2.jpeg”）；
不透明度：0.5；
位置：绝对位置；
背景重复：无重复；
底部：0px；
左：0px；
宽度：500px；
高度：500px；
}
第二个图像正在显示。但是在透明区域的地方，一些颜色被显示而不是透明。我尝试了不同的不透明度值，但没有用。任何人都可以帮我解决这个问题。希望这对您有所帮助，将下面的属性添加到您的css中
#bdgimg {
background-color:transparent;
}
移动屏幕保护程序
html，正文{
位置：相对位置；
身高：100%；
宽度：100%
}
#bgimg{
背景图像：url（“https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg");
位置：绝对位置；
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
身高：100%；
}
#bdgimg{
背景图像：url（“https://cdn.pixabay.com/photo/2017/12/05/09/12/business-2998905_960_720.png");
不透明度：1；
位置：绝对位置；
背景重复：无重复；
底部：0px；
左：0px；
宽度：500px；
高度：500px；
}