HTML/CSS Bild mit Transparenten Hintergrund auf einem Weißen Hintergrund
Bin ich im wesentlichen versuchen, zu erstellen ein Bild mit einem play-Taste in der unteren linken Ecke, das wird, link zu einer anderen Seite spielen Sie eine audio-Datei. Allerdings habe ich ein paar Fragen. In Erster Linie, auch wenn ich speziell bin mit einem play-button mit transparentem hintergrund bekommt es einen weißen hintergrund und umfasst bis die Bild es auf. Ich habe versucht "background-color: transparent;" für die play-Taste, aber das hat nicht funktioniert. Außerdem, ich bin nicht sicher, wie man die Größe von meinem play-Taste. Ich habe versucht, ändern Sie die Breite und Höhe des Bildes über die "post" - Klasse und "post0001" id, aber es scheint nicht zu funktionieren. Ich entschuldige mich, wenn das zu viele Fragen für einen post. Mein code ist unten. Ich danke Ihnen sehr.
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;
}
- hat das problem mit dem hintergrund. Um die Größe des Bildes, Sie wollen eine Breite auf
.post img
. Oder stellen Sie die Breite auf.post
ist, dann fügen Sie.post img { max-width: 100%; }
so, dass das Bild skaliert mit.post
. Sie können auch entfernen Sie den hintergrund vom Bild mit.post img { background: transparent; }
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem ist einfach, dass Sie einen globalen Hintergrundfarbe weiss:
Den
*
zeigt, dass jeder element sollte die hintergrund-Farbe, einschließlich Ihrer Bild. Einfach entfernen Sie diese, und die Schaltfläche wird angezeigt, wie transparent.Alternativ können Sie gewährleisten der Bild-hintergrund wird transparent durch die explizite Angabe, dass es sein sollte:
Auch, wenn Sie wollen einfach nur die navigation zum hintergrund haben, müssen Sie angeben, dass mit:
Habe ich einen JSFiddle präsentiert diese hier.
Hoffe, das hilft! 🙂