带 css 的图像按钮

Question

我想学习如何'nice buttons'添加图片css。例如，假设我想要如下内容

（即图文合一，整幅图为link，同气之物见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

找到这个，可能对你有帮助。

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

Answer 2

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

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

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

Answer 3

试试这个 one。

在这个 fiddle 中，您可以找到与您所问内容类似的内容。只需制作一个锚标记作为缩略图，然后将您的内容放入其中。像这样的东西：

<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 转换来隐藏和显示标题。

更新

我已经更新了代码以转换回正常状态，而不是立即返回。 Fiddlehere

带 css 的图像按钮

Image-button with css

html

css

image

button

imagebutton