使用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/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174036457919668.jpg?x-oss-process=image/resize,p_40"  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中文网其他相关文章！