图片上的div

Question

的顶部所以基本上什么IM的目的是什么是这样的：

但是，我不能够使箭头（如IMG）显示在DIV的顶部。另外，我会很感激，如果some1可以建议如何垂直和水平居中箭头。

这里是我的了：

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>

谢谢！

Answer 1

你可以做，没有任何图像，使用伪

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); 
    }