我想在我的视频缩略图上附加播放按钮(用CSS制作),但我有问题。在小型设备上看起来像:
但如果我想扩大我的窗口,它看起来像:
1: 无论我是否扩大窗口,都可以选择将其严格设置在此缩略图的中心位置?
.video img
{
width: 100%;
}
.play-button-outer {
margin: 25% auto;
width: 50px;
height: 50px;
background-color: #fe6a00;
cursor: pointer;
border-radius: 50%;
position: relative;
top: -185px;
left: 20px;
}
.play-button {
margin: 0 auto;
top: 30%;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 0 12px 17px;
border-color: transparent transparent transparent #FFF;
opacity: .75;
}
.play-button-outer:hover .play-button {
opacity: 1;
}
<div class="video">
<img src="img/video-thumb.png">
<div class="play-button-outer">
<div class="play-button"></div>
</div>
</div>
答案 0 :(得分:0)
这是你想要的吗?
我已经确定了.play-button-outer
绝对和
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
上述行将确保它始终保持在视频的中心(垂直和水平)。
此外,您还需要设置.video
亲戚
.video img {
width: 100%;
position: relative;
}
.video {
position: relative;
}
.play-button-outer {
width: 50px;
height: 50px;
background-color: #fe6a00;
cursor: pointer;
border-radius: 50%;
position: relative;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.play-button {
margin: 0 auto;
top: 30%;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 0 12px 17px;
border-color: transparent transparent transparent #FFF;
opacity: .75;
}
.play-button-outer:hover .play-button {
opacity: 1;
}
&#13;
<div class="video">
<img src="https://placehold.it/200x200">
<div class="play-button-outer">
<div class="play-button"></div>
</div>
</div>
&#13;
答案 1 :(得分:0)
这是一种可重复使用的标准方式,可以垂直和水平对中:
position: absolute;
top: 50%; /* this percentage relates to the parent element */
left: 50%; /* this percentage relates to the parent element */
transform: translate(-50%, -50%); /* this percentage relates to the element itself */
请注意,为了使其按照您期望的方式工作,需要定位父容器(即,它不能具有position: static;
这是默认值。
.video img {
position: relative;
width: 100%;
}
.play-button-outer {
width: 80px;
height: 80px;
background-color: #fe6a00;
cursor: pointer;
border-radius: 50%;
opacity: .75;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity .2s ease;
}
.play-button {
width: 0;
height: 0;
border-style: solid;
border-width: 9px 0 12px 17px;
border-color: transparent transparent transparent #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 2px), -50%);
}
.play-button-outer:hover {
opacity: 1;
}
<div class="video">
<img src="http://placekitten.com/1600/900">
<div class="play-button-outer">
<div class="play-button"></div>
</div>
</div>