Html 如何使用 CSS 在图像上添加按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23238108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add Button over image using CSS?
提问by user258459
i am new in CSS so sorry if this question is just stupid or too simple but i just dont know how to do it.
我是 CSS 新手，如果这个问题很愚蠢或太简单，我很抱歉，但我只是不知道该怎么做。
I need to place a button over the image, how it should looks:
我需要在图像上放置一个按钮，它应该是什么样子：
You see there a blue button "Kopit" Thats IT! i style this thing already to my website but as one single image so my code looks like:
您会看到一个蓝色按钮“Kopit”，就是这样！我已经在我的网站上设计了这个东西，但作为一个单一的图像，所以我的代码看起来像：
CSS:
CSS：
#shop{
background-image: url("images/shop_bg.png");
background-repeat: repeat-x;
height:121px;
width: 984px;
margin-left: 20px;
margin-top: 13px;
}
#shop .content{
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
}
My HTML:
我的 HTML：
<div id="shop">
<div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
<div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
<div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
<div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
<div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
</div>
Is here anybody who can help me to style that button as a different element?
有没有人可以帮助我将该按钮的样式设置为不同的元素？
Thanks a lot for reading this post.
非常感谢您阅读这篇文章。
回答by TryingToImprove
If I understood correctly, I would change the HTML to something like this:
如果我理解正确，我会将 HTML 更改为如下所示：
<div id="shop">
<div class="content">
<img src="http://placehold.it/182x121"/>
<a href="#">Counter-Strike 1.6 Steam</a>
</div>
</div>
Then I would be able to use position:absoluteand position:relativeto force the blue button down.
然后我就可以使用position:absolute并position:relative强制按下蓝色按钮。
I have created a jsfiddle: http://jsfiddle.net/y9w99/
我创建了一个 jsfiddle：http: //jsfiddle.net/y9w99/
回答by AlexPrinceton
Adapt this example to your code
将此示例改编为您的代码
HTML
HTML
<div class="img-holder">
<img src="images/img-1.png" alt="image description"/>
<a class="link" href=""></a>
</div>
CSS
CSS
.img-holder {position: relative;}
.img-holder .link {
position: absolute;
bottom: 10px; /*your button position*/
right: 10px; /*your button position*/
}
回答by W.D.
You need to give relativeor absoluteor fixedpositioning to your container (#shop) and set its zIndexto say 100.
您需要为您的容器 ( )提供relative或absolute或fixed定位#shop并将其设置zIndex为 100。
You also need to give say relativepositioning to your elements with the class contentand lower zIndexsay 97.
您还需要relative使用 class 为您的元素提供 say定位，content并降低zIndexsay 97。
Do the above-mentioned with your images too and set their zIndexto 91.
对您的图像也执行上述操作并将其设置zIndex为 91。
And then position your button higher by setting its position to absoluteand zIndexto 95
然后通过将按钮的位置设置为absolute和zIndex95来将按钮置于更高的位置
See the DEMO
看演示
HTML
HTML
<div id="shop">
<div class="content"> Counter-Strike 1.6 Steam
<img src="http://www.openvms.org/images/samples/130x130.gif">
<a href="#"><span class='span'><span></a>
</div>
<div class="content"> Counter-Strike 1.6 Steam
<img src="http://www.openvms.org/images/samples/130x130.gif">
<a href="#"><span class='span'><span></a>
</div>
</div>
CSS
CSS
#shop{
background-image: url("images/shop_bg.png");
background-repeat: repeat-x;
height:121px;
width: 984px;
margin-left: 20px;
margin-top: 13px;
position:relative;
z-index:100
}
#shop .content{
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
z-index:97
}
img{
position:relative;
z-index:91
}
.span{
width:70px;
height:40px;
border:1px solid red;
position:absolute;
z-index:95;
right:60px;
bottom:-20px;
}
回答by Joseph Cho
I like TryingToImprove's answer. I've essentially taken his answer and simplified it down to the barebonescss to accomplish the same thing. I think it's a lot easier to chew on.
我喜欢 TryingToImprove 的回答。我基本上已经接受了他的回答并将其简化为准系统css 来完成同样的事情。我认为咀嚼要容易得多。
HTML:
HTML：
<div class="content">
<img src="http://placehold.it/182x121"/>
<a href="#">Counter-Strike 1.6 Steam</a>
</div>
CSS:
CSS：
.content{
display:inline-block;
position:relative;
}
.content a {
position:absolute;
bottom:5px;
right:5px;
}
Working fiddle here.
在这里工作小提琴。
回答by Tejinder
<div class="content">
Counter-Strike 1.6 Steam
<img src="images/CSsteam.png">
<a href="#">Koupit</a>
</div>
/*Use this css*/
content {
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
}
content a{
display:inline-block;
padding:10px;
position:absolute;
bottom:10px;
right:10px;
}
