Question

我想在图像内保留一个按钮。但是，当屏幕变小时，该按钮将离开图像区域而只是浮动。我该如何解决？

.slider-button {
  background: gold;   
  border-radius: 8px;
  color: #262626;
  border: none;
  padding: 22px 72px;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  left: 25%;
  bottom: 25%;
}

.slider-img {
  position: relative;
}

<img src = "https://www.mundiario.com/media/mundiario/images/2019/10/02/2019100220032812226.png" / class="slider-img"> 
<button class="slider-button">Press W to win</button>

Answer 1

date        min     max
1/2/2020    6:27    17:42
2/2/2020    10:11   12:11

.slider-button {
  background: gold;   
  border-radius: 8px;
  color: #262626;
  border: none;
  padding: 22px 72px;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  margin: auto;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
}

img {
  position: relative;
}

您必须在CSS中使用像这样的“ .slider-button”，“ img”，并且在所有情况下都可以正常工作。我看了你的代码。

Answer 2

只需将按钮放入图像容器中即可

<img src = "https://www.mundiario.com/media/mundiario/images/2019/10/02/2019100220032812226.png" class="slider-img"> 
<button class="slider-button">Press W to win</button>
</img>

屏幕变小时如何在图像中保留按钮

2 个答案: