>本文探讨了使用CSS将播放按钮图像集中叠加到另一个图像上的技术。 提出了几种方法,每种方法都具有不同程度的浏览器兼容性。
>
>这种方法在现代浏览器中提供了出色的结果,甚至可以与IE8和更高版本的版本效果很好。 您可以在jsfiddle.net/sdsj9/1/上找到一个工作示例(原始文本中提供的链接)。
以前的尝试
#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; }
(示例)
记住将<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>
>和"your-image.jpg"
。 position: absolute;
属性也添加到transform: translate(-50%, -50%);
>元素中,以更好地控制按钮的大小。
width
这个改进的示例更有效地解决了中心问题,并为创建播放按钮叠加层提供了更强大的解决方案。 原始文本中的常见问题解答保持相关并提供有价值的补充信息。
以上是使用CSS播放按钮叠加图像的详细内容。更多信息请关注PHP中文网其他相关文章!