图像顶部的透明按钮

Question

我想在图像上创建一个透明按钮。

喜欢这个

我的css技能达到了极限。我怎么做这个我css？它应该适用于所有浏览器。

Answer 1

让我们假设你里面有一个div容器是image标签，位于按钮标签下面。

<div id="box">
<img....>
<div class="overlaybutton"><a href=...." class="button"><font color="#ffffff">profile blabla</font></a></div>
</div>

这应该是我应该提供的最小代码。 现在来处理你的问题： 您需要做的就是在您的css代码中更改box img和overlaybutton的位置。像这样：

.box img {
  position: absolute;
..
..
}

.box .overlaybutton {
  position: absolute;
  opacity:0.5;  //to make it transparent
}

其余的应该是自我解释的。希望这有助于你。

Answer 2

我发现了一个糟糕的解决方案，如何优化它才能正常工作？ 保证金顶部：-37px;和margin-left：-83px;这不是正确的方法，这不适用于整个平台。

HTML：

.transparent-button-box {
position: relative;}

.transparent-button-box .overlaybutton {
position: absolute;
background-color: #000;
color: #fff;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
height: 33px;
vertical-align: middle;
text-align: center;
margin-top: -37px;
margin-left: -83px;
width: 167px;}

CSS：

for