所以基本上我的目标是:
但是,我无法使箭头(如 img)显示在 div 之上。另外,如果有人可以建议如何使箭头垂直和水平居中,我将不胜感激。
这是我得到的:
section.main{
background-image: url(images/main.png);
overflow: auto;
padding: 290px 0px;
max-width: 1920px;
position: relative;
div{
height: 83px;
width: 83px;
background-color: #fff;
opacity: 0.5;
line-height: 83px;
vertical-align: middle;
text-align: center;
}
img.arr{
z-index: 100;
}
div.btnLeft{
float: left;
}
div.btnRight{
float: right;
}
p{
font-family: 'Playfair Display', sans-serif;
font-style: italic;
color: #fff;
font-size: 32px;
position: absolute;
top: 316px;
left: 375px;
}
<section class="main">
<p>Laisve kurti ir veikti!</p>
<div class="btnLeft">
<img class="arr" src="images/al.png">
</div>
<div class="btnRight">
<img class="arr" src="images/ar.png">
</div>
</section>
谢谢!
最佳答案
你可以在没有任何图像的情况下使用伪
section.main {
background-image: url(images/main.png);
overflow: auto;
padding: 90px 0px;
max-width: 1920px;
position: relative;
}
div {
position: relative;
height: 83px;
width: 83px;
background-color: lightgray;
opacity: 0.5;
}
div::after {
content: '>';
font-weight: bold;
font-size: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
div.btnLeft::after {
content: '<';
}
div.btnLeft {
float: left;
}
div.btnRight {
float: right;
}
p {
font-family: 'Playfair Display', sans-serif;
font-style: italic;
color: #fff;
font-size: 32px;
position: absolute;
top: 316px;
left: 375px;
}
<section class="main">
<p>Laisve kurti ir veikti!</p>
<div class="btnLeft">
</div>
<div class="btnRight">
</div>
</section>
如果你还想要图片,像这样添加它们
div::after {
content: url(images/ar.png);
}
div.btnLeft::after {
content: url(images/al.png);
}
关于html - 图像在 div 之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42355537/