Question

我想在图片标签上叠加一个按钮，如下所示：

<div class="bookList">
    <picture>
        <source media="(min-width: 1000px)" srcset="
                /myimage.jpg 1x,
                /myimage-hd.jpg 2x">
        <source media="(min-width: 500px)" srcset="
                /myimage-sd.jpg 1x,
                /myimage-sd.jpg 2x">
        <img srcset="/myimage-low.jpg 1x" alt="my image">

    </picture>
    <a href="/books">
        <button class="btn btn-custom">SOME IMPORTANT TEXT</button>
    </a>
</div>

.bookList {
    width: 100%;
    img {
        width: 100%;
    }
    a {
            position: relative;
            max-width:100%;

    }
}
.btn-custom{
    color:#fff;
    border-color:#fff;
    background:#000;
    text-align: center;
    margin-top: 20px;
}

但不能在图像上得到它，留在它下面。你能帮我解决一下吗？

Answer 1

您必须将按钮添加到容器中并将此容器置于绝对位置：

<div class="bookList">
    <picture>
        <source media="(min-width: 1000px)" srcset="
            /myimage.jpg 1x,
            /myimage-hd.jpg 2x">
    <source media="(min-width: 500px)" srcset="
            /myimage-sd.jpg 1x,
            /myimage-sd.jpg 2x">
    <img srcset="/myimage-low.jpg 1x" alt="my image">

    </picture>
    <div class="bttn_container">
        <a href="/books">
            <button class="btn btn-custom">SOME IMPORTANT TEXT</button>
        </a>
    </div>

</div> 

.bookList {
    width: 100%;
    position: relative;
}

img {
    width: 100%;
}

a {
    position: relative;
    display: block;
    margin-top: 35%;

}

picture{
    position: relative;
}


.bttn_container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
}

.btn-custom{
    color:#fff;
    border-color:#fff;
    background:#000;
    text-align: center;
    margin-top: 20px;
}

Answer 2

作为替代方案，您可以使用display: grid。我相信，它非常直接，反应灵敏，并得到了大多数主流浏览器的支持。

HTML

<div class="bookList">
  <img srcset="https://ulmhawkeyeonline.com/wp-content/uploads/2017/11/puppy-development-300x200.jpg 1x" alt="my image">
  <button class="btn btn-custom">SOME IMPORTANT TEXT</button>
</div>

CSS

.bookList {
  position: absolute;
  width: 50%;
  border: solid;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
}

img {
  grid-column: 1 /4;
  grid-row: 1/4;
  width: 100%;
}

.btn-custom{
  grid-column: 2;
  grid-row: 2;
  color:#fff;
  border-color:#fff;
  background:#000;
  text-align: center;
  margin-top: 20px;
}

RESULT

我对照片采取了一些自由，因为我不知道你在用什么。我希望你不要介意。

Answer 3

只需将锚标记的位置设置为绝对，并按照您的意愿定位，如下所示：

a {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
}

Answer 4

div{
position:relative;
}
img{
width:100%;
height:300px;
}
button{
 position:absolute;
 top:50%;
 left:50%;
 background-color:#fff;
 border:none;
 height:30px;
 width:100px;
}

<head>
    <title>HI</title>
  </head>
  <body>
    <div>
      <img src="https://i.imgur.com/I5DFV.jpg">
      <button>Click</button>
    </div>
  </body>

Answer 5

你可以看到例子：

＆＃13;

<a href="https://codepen.io/philcheng/pen/YWyYwG">click here to this link</a>

＆＃13;

html5图片标签，图像中间的按钮

5 个答案: