我想两个创建两个按钮,使用
HTML覆盖div,如下所示：
*两个相同的DIV,每侧有两个按钮重叠.所以一个div有两个按钮重叠.
我希望按钮是透明的并覆盖div但我不知道如何.
我创造了我的Div：
<div class="container">
<div id="slides">
<img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
</div>
</div>
我要覆盖的div称为“容器”,两个按钮是：
<a href="#" class="slidesjs-prevIoUs slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a> <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
在CSS或HTML中有没有办法做到这一点？
解决方法
您必须将按钮完全放在图像上.要做到这一点,首先要使.container占据一个位置：相对;然后把你的按钮作为你的.slides div的兄弟姐妹,绝对放置它们.
.container {
position: relative;
}
.slidesjs-navigation {
position: absolute;
top: 0;
display: block;
width: 50%;
height: 100%;
background: rgba(0,0); /* Added in case you want to transition this */
}
.slidesjs-navigation:hover {
background: rgba(0,0.25); /* Makes the hovered button visible */
}
.slidesjs-prevIoUs {
left: 0;
}
.slidesjs-next {
right: 0; /* left: 50%; works too */
}
.slides img {
display: block; /* Avoids the space usually seen under inline images */
width: 100%; /* Ensures the image takes up the whole width */
}
<div class="container">
<div id="slides" class="slides">
<img src="https://c1.staticflickr.com/5/4147/5087404401_d24513119a_b.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/"><!-- original `src`: "img/example-slide-1.jpg" -->
</div>
<a href="#" class="slidesjs-prevIoUs slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
<a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
</div>
