带有CSS的图像按钮

Question

我想学习如何做好按钮＆＃39;用css添加图片的地方。例如，假设我想要类似下面的内容

（也就是说，图片和文字在一起，整个图片就是链接。你可能会看到http://www.geogebra.org/team有同样精神的东西）。问题是这样做如下

HTML

<a class="modern_art" href="...">Modern Art</a>

CSS

.modern_art{
     background-image: url(/pictures/modern_art.jpg) 
     /* or something similar */
     /* more instructions */
}

到目前为止，我所做的最好的事情是将图片放在后面，然后用::before放置名称，但这还不足以获得一个漂亮的按钮。你会推荐我什么？

Answer 1

试试这个one。

在这个小提琴中你可以找到类似于你问的东西。只需将锚标记作为缩略图，然后将其内容放入其中。像这样的东西：

<a href="#" class="thumbnail">
  <figure>
    <img src="http://i.stack.imgur.com/g1Ce8.png" alt="bg" />
    <figcaption>
      <div>
      Caption here
      </div>
    </figcaption>
  </figure>
</a>

然后我使用定位和CSS3过渡来隐藏和显示标题。

<强>更新

我已经更新了代码以转换回正常状态，而不是立即回到它。小提琴here

Answer 2

找到这个，可能会帮助你。

https://css-tricks.com/design-considerations-text-images/

Answer 3

嗯，你与CSS非常接近。它所需要的只是一个明确的宽度和高度，以及一些填充。

＆＃13;

＆＃13;

.modern_art{
     display:inline-block;
     width: 252px; height:20px;
     background: #a9a9a9 url(http://i.stack.imgur.com/s2ZG0.png) no-repeat center 40px;
     padding: 318px 60px 30px;
     text-align:center; /* oh well, and some styling to make the text look similar to the example */
     color:black;
     text-decoration:none;
     font-size:20px;
     letter-spacing:.1em;
}

＆＃13;

<a class="modern_art" href="...">Modern Art</a>

＆＃13;

＆＃13;

＆＃13;