HTML/CSS多個圖像重疊

所以我想要做的是2個箭頭/指針圖像重疊橫幅（另一圖像）。HTML/CSS多個圖像重疊

如何讓兩個箭頭保持「在圖像上」並將它們對齊到左中間和右中間第二個中間位置？

這裏是什麼，我已經得到了現在的圖像： http://prnt.sc/b8govy

而我使用的代碼（上圖中）：

img#art { 
 
display: block; 
 
margin-right: auto; 
 
margin-left: auto; 
 
width: 100%; 
 
height: 100%; 
 
max-height: 300px; 
 
z-index: -1; 
 

 
} 
 

 
img#raw { 
 
    display: block; 
 
    margin-left: auto; 
 
    z-index: 2; 
 
} 
 

 
img#law { 
 
    display: block; 
 
    margin-right: auto; 
 
    z-index: 1; 
 
}

<div id="main"> 
 
    \t 
 
    \t <img id="raw" src="images/rightarrow.png"> 
 
    \t <img id="law" src="images/leftarrow.png"> 
 
    \t <img id="art" src="images/banner.png"> 
 

 
    </div>

來源

2016-05-25 The Zelax

嘗試採取顯示：首先阻止，這使得每個元素採取父元素的所有可用空間。 – iomv

你必須在箭頭中使用position absolute，在父項中使用relative。

.banner { 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
.arrow { 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.arrow.left { 
 
    top: 50%; 
 
    left: 15px; 
 
    margin-top: -15px; 
 
    
 
    width: 0; 
 
    height: 0; 
 
    border-top: 15px solid transparent; 
 
    border-bottom: 15px solid transparent; 
 
    border-right: 15px solid #000; 
 
} 
 

 
.arrow.right { 
 
    top: 50%; 
 
    right: 15px; 
 
    margin-top: -15px; 
 
    
 
    width: 0; 
 
    height: 0; 
 
    border-top: 15px solid transparent; 
 
    border-bottom: 15px solid transparent; 
 
    border-left: 15px solid #000; 
 
}

<div class="banner"> 
 
    <div class="arrow left"></div> 
 
    <div class="arrow right"></div> 
 
    
 
    <img src="http://placehold.it/400x200/?text=Banner"> 
 
</div>

來源

2016-05-25 22:54:40 nanilab

謝謝，我設法得到橫幅上的箭頭，但是我很難將它們放在橫幅的中間左側/右側，有什麼建議嗎？ –

是的，閱讀我的答案中的代碼，你必須使用top：50％，margin-top： - （高度的一半）和margin-left或margin-right（取決於你要設計的箭頭）他們從父母的邊界。 – nanilab

刪除所有display: block; margin-left: auto; margin-right: auto。
在橫幅上使用position: relative; z-index: -1;。
將其移動到top: -Xpx;。 //或其他單位（VH，REM，EM）
兩個箭頭z-index: 2
左箭頭float: left
右箭頭float: right

這裏是從網上隨機圖片小提琴 https://jsfiddle.net/warkentien2/xLo1ac5e/

來源

2016-05-25 23:08:50 warkentien2

你說得對。我會猜測至少是內聯塊。謝謝！ – warkentien2

HTML/CSS多個圖像重疊

回答

相關問題