logo标签列表

HTML/CSS让透明背景的图片变成白色背景

htmlcss
9
我想创建一个带有播放按钮的图像，该按钮位于左下角，并将链接到另一页以播放音频文件。但是，我遇到了一些问题。首先，即使我明确使用具有透明背景的播放按钮，它也会给它一个白色背景，覆盖了它所在的图像。我尝试了“background-color: transparent;”来设置播放按钮的背景色，但没有效果。此外，我不知道如何调整我的播放按钮大小。我尝试通过“post”类和“post0001”id更改图像的宽度和高度，但似乎并没有起作用。如果这篇文章提出了太多问题，我很抱歉。以下是我的代码。非常感谢。 

* {
  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;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="dontgoogleit.css">
  <div class=l ogo>
    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>

</html>

@ObsidianAge有背景问题。要调整图像大小，您可以在.post img上设置宽度。或者您可以在.post上设置宽度，然后添加.post img { max-width: 100%; }以使图像与.post一起调整大小。您还可以使用.post img { background: transparent; }从图像中删除背景。 - Michael Coker
2个回答
17
问题很简单，你只是设置了一个白色的全局背景颜色：

问题很简单，你只是设置了一个白色的全局背景颜色：

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

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

或者，您可以通过明确指定图像应该是透明的来确保图像背景是透明的:

.post img {
  background: transparent;
}

此外，如果您只想让导航栏有背景色，您需要使用以下代码进行指定：

```css background-color: [颜色值]; ```
```[颜色值]``` 为您希望设置的背景色的值。
.topnav {
  background-color: rgb(300, 300, 300);
}

我创建了一个 JSFiddle 来展示这个 这里。

希望这有所帮助！ :)

-2

这可能也是因为你正在使用"background-image"，尝试只使用background，像这样：

background: url(https://static.pexels.com/photos/298611/pexels-photo-298611.jpeg);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接