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多个图像重叠

回答

相关问题