Play -Taste -Overlay -Bild mit CSS

In diesem Artikel werden Techniken zum zentralen Überlagern eines Wiedergabetastens auf ein anderes Bild mit CSS untersucht. Es werden mehrere Ansätze vorgestellt, jeweils unterschiedliche Browserkompatibilität.

Die effektivste Methode

Dieser Ansatz liefert hervorragende Ergebnisse in modernen Browsern und funktioniert sogar gut mit IE8 und späteren Versionen. Sie finden ein funktionierendes Beispiel auf jsfiddle.net/sdsj9/1/ (Link im Originaltext angegeben).

Vorherige Versuche

Mehrere frühere Versuche werden dokumentiert, jeweils eigene Stärken und Schwächen in Bezug auf die Kompatibilität des Cross-Browsers. Diese finden Sie unter jsfiddle.net/yaukb/1/ und jsfiddle.net/yaukb/6/ (Links vom Original).

css

#container {
    position: relative;
    display: inline-block;
    border: 1px solid green; /* For demonstration purposes */
}

#container * {
    box-sizing: border-box; /* For consistent box model across browsers */
}

#image {
    z-index: 9;
    text-align: center;
    border: 1px solid blue; /* For demonstration purposes */
}

#play {
    background: url('https://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat;
    position: absolute; /* Crucial for overlaying */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the button */
    height: 140px;
    width: 140px; /* Added for better control */
    z-index: 10;
}

html (Beispiel)

<div id="container">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174036457919668.jpg"  class="lazy" alt="Play button overlay image using CSS " />
  <div id="play"></div>
</div>

Denken Sie daran, "your-image.jpg" durch den tatsächlichen Pfad zu Ihrem Bild zu ersetzen. Die Hauptverbesserung in diesem überarbeiteten CSS ist die Verwendung von position: absolute; und transform: translate(-50%, -50%); für eine präzise Zentrierung im Container. Die Eigenschaft width wird auch dem #play -Element hinzugefügt, um die Größe der Taste besser zu steuern.

Dieses verbesserte Beispiel befasst sich effektiver mit dem Zentrenproblem und bietet eine robustere Lösung zum Erstellen eines Play -Taste -Overlays. Die FAQs aus dem ursprünglichen Text bleiben relevant und liefern wertvolle ergänzende Informationen.

Das obige ist der detaillierte Inhalt vonPlay -Taste -Overlay -Bild mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!