所以,我有这个 div 的 id:
#button{
width: 1280px;
text-align: center;
}
#panel{
position:absolute;
width: 100%;
text-align: center;
}
<div id="panel">
<img position="absolute" src="http://www.ionixpower.com/wp-content/uploads/2014/07/Grass-globe-1-1280x500.jpg">
</div>
<div id="button">
<img src="http://2.firepic.org/2/images/2015-11/07/k9l53oj2fqg7.png">
</div>
它包含一个宽度为 1280 像素的图像,一个标题图片。
我需要在这张图片的中间放一个PLAY按钮,这样当我调整浏览器窗口大小或者放大或缩小时它就不会消失;尽管此按钮需要在大多数现有分辨率中居中。
我该怎么做?
最佳答案
试试这个 https://jsfiddle.net/1rt9g601/2/
HTML
<div id="panel">
<button class="play">Play button</button>
</div>
CSS
#panel {
width: 100vw;
height: 100vh;
text-align: center;
position:relative;
background: url('http://placehold.it/1980x960');
background-size: cover;
background-position: center;
}
button {
position: absolute;
top: 50%;
-ms-transform: translate(-35px, -20px);
-webkit-transform: translate(-35px, -20px);
transform:translate(-35px, -20px);
}
关于html - 站点标题中间的 PLAY 按钮(CSS、HTML),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33587140/