Question

我基本上是尝试使用左下角的播放按钮创建一个图像，该图像将链接到另一个页面以播放音频文件。但是，我有几个问题。首先，即使我特别使用具有透明背景的播放按钮，它也会给它一个白色背景，以覆盖它所在的图像。我试过＆＃34;背景颜色：透明;＆＃34;对于播放按钮，但这不起作用。此外，我不知道如何调整我的播放按钮的大小。我试图通过＆＃34; post＆＃34;来改变图像的宽度和高度。上课和＆＃34; post0001＆＃34; id，但它似乎没有用。如果这个帖子的问题太多，我会道歉。我的代码如下。非常感谢你。

HTML：

<head>
<link rel = "stylesheet" href = "dontgoogleit.css">
<div class= logo>
DGI
<!-- <img src = -->
</div>
<title>
pls dnt
</title>
<div class="topnav" id="myTopnav">
<a href="#episodes" id="episodes">EPISODES</a>
<a href="#sources" id="sources">SOURCES</a>
<a href="#about" id ="about">ABOUT</a>
<a href="#contactus" id ="contact">CONTACT US</a>
</div>
</head>
<body>
<div class="post" id="post0001">
<img src="http://www.pngmart.com/files/3/Play-Button-Transparent-Background.png"  alt= "Play Button" href="#episodeOne">
</div>

CSS：

   *   {
    margin: 0;
    padding: 0;
    background-color: rgb(300, 300, 300);
}

.topnav {
    padding-top: 50px;
    /*padding-left: 200px;*/
    position: relative;
    letter-spacing: 2px;
    float: left;
}

.topnav a {
    font-size: 20px;
    color: black;
    text-decoration: none;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    margin-bottom: 35px;
    margin-left: 80px;
}

#episodes {
    border-bottom-color: rgb(219, 50, 54);
}

#sources {
    border-bottom-color: rgb(72, 133, 237);
}

#about {
    border-bottom-color: rgb(244, 194, 13);
    /*padding-left: 15px;
    padding-right: 15px;*/
}

#contact {
    border-bottom-color: rgb(60, 186, 84);
}

.post {
    position: fixed;
    margin-top: auto;
    width: auto;
    top:120px;
}

#post0001 {
    width: 500px;
    height: 500px;
    background-image: url(https://static.pexels.com/photos/298611/pexels-photo-298611.jpeg);
    background-repeat: no-repeat;
    padding-bottom: 200px;
    padding-right: 350px;
    padding-left: 15px;
    padding-top: 45px;

}

.logo {
    font-size: 80px;
    color: black;
    font-family: sans-serif;
    float: left;
}

Answer 1

问题只在于您将全局背景颜色设置为白色：

* {
  background-color: rgb(300, 300, 300);
}

*表示每个元素应具有背景颜色，包括您的图像。只需将其删除，您的按钮就会显示为透明。

或者，您可以确保图像背景是透明的，方法是明确说明它应该是：

.post img {
  background: transparent;
}

此外，如果您只想让导航具有背景，则需要使用以下内容指定：

.topnav {
  background-color: rgb(300, 300, 300);
}

我创建了一个展示此here的JSFiddle。

希望这有帮助！：）

HTML / CSS为透明背景的图像提供白色背景

1 个答案: