html - 带有CSS的图像按钮

Question

我想学习如何使用 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 .

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

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

更新

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