我试图在响应式图像上显示播放按钮。按钮有96x96像素,需要在图像的中心。使用css播放响应式图像上的按钮
我尝试了很多方法,但总是很糟糕。我读了一些关于柔性设计的内容,也许在flex中很简单?
我需要非常简单的方法,因为会有5到10个元素。
感谢和问候
我试图在响应式图像上显示播放按钮。按钮有96x96像素,需要在图像的中心。使用css播放响应式图像上的按钮
我尝试了很多方法,但总是很糟糕。我读了一些关于柔性设计的内容,也许在flex中很简单?
我需要非常简单的方法,因为会有5到10个元素。
感谢和问候
如果要给图像的父元素,可以使覆盖在父的中心母公司和其位置的背景图像。
div {
display: inline-block;
position: relative;
}
img {
max-width: 100%;
}
div:after {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 96px;
height: 96px;
background: url('https://img.clipartfest.com/d0227ce70c0b9f371e7a7a018729143e_thumbs-up-smiley-face-big-thumbs-up-clipart_2891-2674.jpeg');
background-size: cover;
content: '';
}
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
这里是相同的技术,但随着覆盖在父的img
。
div {
display: inline-block;
position: relative;
}
img {
max-width: 100%;
}
.thumb {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 96px;
height: 96px;
}
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<img src="https://img.clipartfest.com/d0227ce70c0b9f371e7a7a018729143e_thumbs-up-smiley-face-big-thumbs-up-clipart_2891-2674.jpeg" class="thumb">
</div>
把你的图像转换成相对的容器,和您的播放键为绝对的。 Somethinkg这样的:
<div class="videoContainer">
<img src="link_to_your_image" alt="">
<img src="link_to_play_button" alt="play" class="playBtn">
</div>
和CSS:
.videoContainer {
position: relative;
}
.playBtn {
position: absolute;
width: 96px;
height: 96px;
left: 50%;
top: 50%;
margin-left: -48px; /*half of the width */
margin-top: -48px; /*half of the height */
}
如果你可以提供一个小提琴链接或摘录链接,它也是很好的现实状态。 –
真是最好的!非常感谢你,我的朋友! :) – Delavor