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; }
Schreibe einen Kommentar