Question

我正在尝试在图像上创建一个按钮。但是，我遇到一个问题，我的按钮出现在其下方或上方。我尝试使用w3示例之一解决此问题，但仍然是相同的问题。另外，我还有其他问题如何减少这张照片的高度？因为如果我降低高度，那也行不通。

<section>
        <button class="btn btn-danger">my_button</button>
        <img class="sectionImage" src="images/kendall-henderson-Pj6TgpS_Vt4-unsplash.jpg" alt="Logistics transport">
    </section>

.sectionImage {
    filter: grayscale(70%);
    max-width: 100%;
    height: auto;
}

Answer 1

尝试此代码

section{
  position: relative;
}
button{
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: 1;
}
.sectionImage {
    filter: grayscale(70%);
    max-width: 100%;
    height: auto;
}

<section>
        <button class="btn btn-danger">my_button</button>
        <img class="sectionImage" src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Logistics transport">
    </section>

Answer 2

您可以尝试以下方法：

<section>
    <img class="sectionImage" src="https://images.unsplash.com/photo-1520050704800-294fd98f29e8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1296&q=60" alt="Logistics transport">
    <button class="btn btn-danger">my_button</button>
</section>

使用此CSS：

<style>
    section {
        position: relative;
    }

    .sectionImage {
        width: 500px;
        filter: grayscale(70%);
        max-width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }

    .btn-danger {
        position: absolute;
        top: 50px;
        left: 50px;
    }
</style>

Answer 3

尝试不同的位置。例如：center，top-right，bottom-left等。参考：https://www.w3schools.com/howto/howto_css_image_text.asp

.container {
  position: relative;
  text-align: center;
  color: white;
}


/* Bottom left text */

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}


/* Top left text */

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}


/* Top right text */

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.sectionImage {
  height: 80%;
  width: 100%;
}


/* Bottom right text */

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}


/* Centered text */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<section class="container">
  <button class="bottom-left">Bottom Left</button>
  <button class="top-left">Top Left</button>
  <button class="top-right">Top Right</button>
  <button class="bottom-right">Bottom Right</button>
  <button class="centered">Centered</button>
  <img class="sectionImage" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="Logistics transport">
</section>

Answer 4

请尝试将两个标签放入容器中，使它们都位于绝对位置，并使按钮具有更大的z索引。像这样的东西。

<div id="container" style="overflow:hidden; position:relative;"> <img src="your image" style="position:absolute; z-index:1;"> <button style="position:absolute; z-index:10;top:50px; left:50px;"> TESTING TESTING 123 </button> </div>

您可以在此处根据需要编辑代码，并且按钮元素应显示在img元素上方

无法在出现在图片下方或上方的图片上放置按钮

4 个答案: