Question

我制作了一个透明的“按钮”并将其放在全宽背景图像上我在<a>中使用该课程我希望按钮能够响应图像。我是横向完成但不是完全垂直的。（我的想法是将一页打印成一页）这是html：

<div class="container">
            <div class="nav">nav area</div>
            <div class="bg-image">
              <a class="button-transp abs" href="#">Butt text<br>second line<br>third</a>
                <img src="bg_top.jpg">
                 <h1>This is centered text.</h1>
            </div>
            <div class="main">main area</div>
</div>

CSS

.abs {
  position: absolute;
  z-index: 2;
margin: 25% auto 0;
  left: 0;
  right: 0;
}
.button-transp {
  display: inline-block;
  min-width: 170px;
  max-width: 500px;
  width: 30%;
  padding: 8px;
  color: #fff;
  background-color: transparent;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
}

我使用保证金：25％自动0;得到它接近正确的东西..

Answer 1

您希望按钮保持对图像的居中，在这种情况下，您应该使用背景图像。然后将按钮定位为从顶部 50％，从左侧50％，将其高度拉回到其高度的-1/2 和 -1/2的宽度为左侧。这样做是为了强制按钮始终保持在bg-image的中心。

<div class="container">
    <div class="nav">nav area</div>
    <div class="bg-image">
       <a class="button-transp abs" href="#">Butt text<br>second line<br>third</a>
       <h1>This is centered text.</h1>
    </div>
    <div class="main">main area</div>
</div>

.abs {
    position: absolute;
    z-index: 2;
    top: 50%;
    margin-top: -37px;  /** the button height is 74, so pull it half to the top the make the gap top and bottom equal */
    left: 50%;
    margin-left: -95px; /** again, full button width / 2 */
}
.button-transp {
    display: inline-block;
    min-width: 170px;
    max-width: 500px;
    width: 30%;
    padding: 8px;
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    text-align: center;
    outline: none;
}
.bg-image {
    background: url(http://www.online-image-editor.com//styles/2014/images/example_image.png) no-repeat 0 0;
    width: 475px;
    height: 360px;
    position: relative;
}

请参阅fiddle

Answer 2

我缩写了结构，但是此选项适用于任何尺寸的按钮，并且始终以水平和放大为中心。垂直。

CSS3转换基本上是IE9及以上（根据需要适当加前缀）

.bg-image {
    height: 200px;
    background: orange;
    position: relative; /* positioning contexr */
}

.button-transp {
    width: 30%;
    white-space:nowrap;
    padding: 8px;
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    text-align: center;
    outline: none;
    position: absolute;
    z-index: 2;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
}

<div class="container">
    <div class="bg-image">
        <a class="button-transp abs" href="#">Butt text<br/>second line<br/>third</a>
    </div>
</div>

垂直对齐＆＃34;按钮＆＃34;

2 个答案: