Menu
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>
773
Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function.
The images are indeed transparent, but the theme you're using is adding white background too all the images in a post. You can also overwrite this on a per image basis, by adding inline css to the image tag in the html editor. Hope this helps.
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! :)
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
