我正在尝试在我的图像上创建一个按钮。但是,我遇到了一个问题,我的按钮出现在它的下方或上方。我试图用 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;
}
最佳答案
试试这段代码
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>
关于html - 无法将按钮放在图片下方或上方的图像上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57062035/