HTML/CSS Gives Image with Transparent Background a White Background
Question
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.
* { 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>
2 answers
solution1
6 ACCPTED 2017-03-30 00:21:18
The problem is simply that you set a global background colour of white:
* {
background-color: rgb(300, 300, 300);
}
The * denotes that every element should have the background colour, including your image. Simply remove this, and your button will display as transparent.
Alternatively, you can ensure the 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! :)
solution2
-2 2022-02-24 20:37:12
It may also be happening because u are using "background-image" try to use just background, like this:
background: url(https://static.pexels.com/photos/298611/pexels-photo-298611.jpeg);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.