使用CSS播放按鈕疊加圖像

>本文探討了使用CSS將播放按鈕圖像集中疊加到另一個圖像上的技術。 提出了幾種方法，每種方法都具有不同程度的瀏覽器兼容性。

>

最有效的方法

>這種方法在現代瀏覽器中提供了出色的結果，甚至可以與IE8和更高版本的版本效果很好。 您可以在jsfiddle.net/sdsj9/1/上找到一個工作示例（原始文本中提供的鏈接）。

以前的嘗試

>記錄了幾次較早的嘗試，每次嘗試都具有跨瀏覽器兼容性的優勢和劣勢。 這些可以在jsfiddle.net/yaukb/1/和jsfiddle.net/yaukb/6/（原始）。

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

（示例）

記住將

<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>

替換為圖像的實際路徑。 此修訂後的CSS的關鍵改進是在容器內使用

>和"your-image.jpg"。 position: absolute;屬性也添加到transform: translate(-50%, -50%);>元素中，以更好地控制按鈕的大小。 width這個改進的示例更有效地解決了中心問題，並為創建播放按鈕疊加層提供了更強大的解決方案。 原始文本中的常見問題解答保持相關並提供有價值的補充信息。

以上是使用CSS播放按鈕疊加圖像的詳細內容。更多資訊請關注PHP中文網其他相關文章！