Question

我想使用CSS在图像中插入一个按钮;图像具有固定的宽度和高度，以页面为中心。按钮必须在图像中以不同的分辨率保持静止。

Answer 1

CSS不允许<img>标记内的其他元素。我在这种情况下的常见做法是将图像和按钮放在两个包装<div>元素中，这些元素就像一个表（垂直和水平居中）。 像这样;

<强> HTML

<div class="wrapper">
  <div>
    <img src="[your image src]">
    <a class="button" href="[go to page]">Button</a>
  </div>
</div>

<强> CSS

.wrapper{
  display: table;
  width: 100%; /* Add or remove this depending on your layout */
}
.wrapper > div{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

只要图像没有尺寸限制，它应该齐平地位于图像的中心:)。享受！

编辑 ---

或者，移除<img>代码并将其作为.wrapper的背景图片并使用background-size：cover;以它为中心:)。然后，您可以非常轻松地控制图像的高度和宽度。

请记住也要使用供应商前缀。我有一个方便的列表here虽然它们在Sass中。

Answer 2

你的CSS中的

：

myImage {
background-image:url('image.jpg');
background-size:cover;
}

务必为您的按钮添加ID

HTML中的

<button id='myImage' type='submit'>&nbsp;</button>

Answer 3

要将按钮放在您想要的位置，只需给它一些边距：

.wrapper button {
    margin-left:81%; margin-top:3%;
}

但我相信你想要背景图像的div永远不会比窗口大，对吧？在这种情况下，你需要更多的CSS：在div上设置最大宽度和最大高度，然后你还需要将html和body都设置为固定的宽度和高度，否则max-width和max - 高度不知道他们应该相对于什么那就是

html, body {width:100%; height:100%; margin:0; padding:0;}

.wrapper {
    (..)
    margin:0 auto;
    max-width:100%; max-height:100%;
}

请参阅updated fiddle。

在CSS中的图像中定位按钮

3 个答案: