html – 创建与DIV重叠的两个按钮

发布时间：2020-12-14 19:41:51 所属栏目：资源来源：网络整理

导读：我想两个创建两个按钮,使用 HTML覆盖div,如下所示： *两个相同的DIV,每侧有两个按钮重叠.所以一个div有两个按钮重叠. 我希望按钮是透明的并覆盖div但我不知道如何. 我创造了我的Div： div class="container" div id="slides" img src="img/example-slide-1.j

我想两个创建两个按钮,使用 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!