Question

https://medium.freecodecamp.org/ultimate-end-to-end-tutorial-to-create-an-application-on-blockchain-using-hyperledger-3a83a80cbc71我需要在浏览器上显示屏幕保护程序。屏幕保护程序应包含2部分作为静态图像和运动图像。移动图像有一些建筑物，在没有建筑物的其余区域（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>

显示第二张图片。但是代替透明区域，一些颜色显示而不是透明。我尝试了不同的不透明度值，但没有用。任何人都可以帮我解决这个问题。

Answer 1

希望这会对您有所帮助，将以下属性添加到您的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在另一个图像上显示图像（透明）

1 个答案: