Bild oben auf div

Question

Also im Grunde, was im tun Ziel ist dies:

aber ich bin auf den Pfeil nicht in der Lage (wie img) zu machen, zeigt oben auf div. Auch würde ich schätzen, wenn some1 könnte beraten, wie man den Pfeil vertikal und horizontal zentriert.

Hier ist, was ich habe:

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>

Dank!

Answer 1

Sie können das tun, ohne Bilder, ein Pseudo-

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>

---

Wenn Sie immer noch die Bilder verwenden möchten, fügen Sie sie wie dieser

div::after { 
    content: url(images/ar.png); 
    } 
    div.btnLeft::after { 
    content: url(images/al.png); 
    }