HTML/CSS 为具有透明背景的图像提供白色背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43106366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS Gives Image with Transparent Background a White Background
提问by jeepers mcface
I am essentially trying to create an image with a play button in the bottom left corner, that will link to another page to play an audio file. However, I am having a couple issues. First and foremost, even though I specifically am using a play button with a transparent background, it gives it a white background which covers up the image it's on. I tried "background-color: transparent;" for the play button, but that didn't work. Additionally, I am not sure how to resize my play button. I've tried to change the width and height of the image via the "post" class and "post0001" id, but it doesn't seem to work. I apologize if this is too many questions for one post. My code is below. Thank you very much.
我基本上是在尝试在左下角创建一个带有播放按钮的图像，它将链接到另一个页面以播放音频文件。但是，我有几个问题。首先也是最重要的，即使我特意使用了一个带有透明背景的播放按钮，它也会给它一个白色背景，覆盖它所在的图像。我试过“背景颜色：透明；” 对于播放按钮，但这不起作用。此外，我不确定如何调整播放按钮的大小。我试图通过“post”类和“post0001”id 更改图像的宽度和高度，但它似乎不起作用。如果一篇文章的问题太多，我深表歉意。我的代码如下。非常感谢。
HTML:
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:
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;
}
回答by Obsidian Age
The problem is simply that you set a globalbackground colour of white:
问题很简单，您将全局背景颜色设置为白色：
* {
background-color: rgb(300, 300, 300);
}
The *denotes that everyelement should have the background colour, including your image. Simply remove this, and your button will display as transparent.
该*表示每一个元素应该有背景颜色，包括你的形象。只需删除它，您的按钮将显示为透明。
Alternatively, you can ensurethe image background is transparent by explicitly stating that it should be:
或者，您可以通过明确说明它应该是以下内容来确保图像背景是透明的：
.post img {
background: transparent;
}
Also, if you just want the navigation to have the background, you need to specify that with:
此外，如果您只希望导航具有背景，则需要使用以下内容指定：
.topnav {
background-color: rgb(300, 300, 300);
}
I've created a JSFiddle showcasing this here.
Hope this helps! :)
希望这可以帮助！:)
