Question

我不知道图像的透明度如何工作，但我知道具有检查背景的png元素应该是透明的。

所以我认为当我将图像添加到div元素中时，检查器背景只会消失，但事实并非如此。有办法解决这个问题吗？

body {
    background-color: black;
    text-align: center;
}

.gameArea {
    background-color: white;
    width: 50%;
    height: 500px;
    display: inline-block;
    margin-top: 200px;
}

.game {
    text-align: center;
}

.plane {
    position: absolute;
    top: 100px;
    left: 50px;
    width: 80px;
    height: 40px;
    background-image: url(guts.png);
    background-size: cover;
}

-

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" href="style.css">


</head>
<body>
    <h1 class = 'title'>Berserk</h1>


    <div class = "score"></div>
    <div class = "game"> 
        <div class = "gameArea">

            <div class = "plane"></div>

        </div>
    </div>
</body>

Answer 1

您当前的照片是JPG。如果要透明，则必须是PNG。您正在寻找新图像，或者可以使用GIMP（https://www.gimp.org/）编辑当前图像，然后另存为PNG。

如何使用具有透明背景的图像？

1 个答案: