如何使用CSS在图片上添加按钮？

Question

我刚接触 CSS，如果这个问题很愚蠢或者太简单了请见谅，但我真的不知道如何做到。

我需要将一个按钮放在图片上方，它应该是这样的：

你看到那里有一个蓝色的按钮 "Kopit"。我已经将其样式设置为我的网站，但只作为一个单独的图像，所以我的代码看起来像这样：

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;

}

我的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>

有没有人能帮我将那个按钮样式改为不同的元素？

非常感谢您阅读这篇文章。

- user258459

---

除了 CSS 之外，你首先需要一个按钮。目前，整个图像周围都有一个链接。这是你的意图吗？让整个图像可点击？还是只有按钮可点击？ - GolezTrol

我尝试这样写代码：#shop .buybutton{ 背景颜色: #2d79bd; 宽度:58像素; 高度:22像素; } - user258459

是的，但是你需要在HTML中有一个类为buybutton的元素才能起作用。一个网站不仅仅是CSS。CSS只是为现有元素添加样式。要制作一把红色的椅子，你不仅需要红色的油漆，还需要一把椅子。CSS只是油漆。 - GolezTrol

当然，伙计，我也用HTML写过，但它并没有按照我的意愿工作，所以我将其删除，以免让试图帮助的人感到困惑。 - user258459

Answer 1

如果我理解正确的话，我会将HTML更改为以下内容：

<div id="shop">
    <div class="content">
        <img src="http://placehold.it/182x121"/> 
        <a href="#">Counter-Strike 1.6 Steam</a>
    </div>
</div>

那么我就能使用 position:absolute 和 position:relative 来将蓝色按钮向下推。

我已经创建了一个 jsfiddle： http://jsfiddle.net/y9w99/

- TryingToImprove

Answer 2

请将此示例适应于您的代码

HTML

<div class="img-holder">
    <img src="images/img-1.png" alt="image description"/>
    <a class="link" href=""></a>
</div>

CSS

.img-holder {position: relative;}
.img-holder .link {
    position: absolute;
    bottom: 10px; /*your button position*/
    right: 10px; /*your button position*/
}

- AlexPrinceton

Answer 3

您需要为容器（#shop）设置相对、绝对或固定定位，并将其 zIndex 设置为 100。

您还需要为类名为 content 的元素设置相对定位，并将其 zIndex 设置为较低的 97。

对于图像，您也需要执行上述操作，并将它们的 zIndex 设置为 91。

然后通过将其位置设置为 absolute 并将 zIndex 设置为 95 来更高地定位您的按钮。

查看演示

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

#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;

}

- W.D.

Answer 4

我喜欢TryingToImprove的回答。我基本上采用了他的答案，并将其简化为最基本的CSS，以完成相同的事情。我认为这样更容易理解。

.content {
  display: inline-block;
  position: relative;
}

.content a {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

<div class="content">
  <img src="http://unsplash.it/182/121" />
  <a href="#">Counter-Strike 1.6 Steam</a>
</div>

- Joseph Cho

Answer 5

<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;
}

- Tejinder