css 按钮悬浮在图片上 |table隐藏行css3

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.image-container {
position: relative;
}
.button-on-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

如上所示，通过设置CSS样式，大家可以让按钮悬浮在图片上方。具体实现方式就是将按钮容器设置为图片容器的相对定位，然后在按钮的CSS样式中设置绝对定位并让其居中对齐。

下面是HTML代码的示例：

<div class="image-container">
<img src="image.jpg" alt="example image">
<button class="button button-on-image">Click Me</button>
</div>

通过将按钮容器放在图片容器中，大家就可以实现按钮悬浮在图片上的效果。这种效果可以用在banner、产品展示、创意设计等多种场景中，让网站更加生动有趣。