代码之家 › 专栏 › 技术社区 › jekyll-friend

带有css的图像按钮

imagebutton button image css html

jekyll-friend · 技术社区 · 8 年前

我想学习如何用css添加图片的“漂亮按钮”。例如,假设我想要以下内容

nice button

(也就是说,图片和文本在一起,整个图片就是链接。您可以看到 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 ,但这还不足以得到一个漂亮的按钮。你能推荐我什么?

3 回复 | 直到 8 年前

gdyrrahitis 8 年前

试试这个 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

Felix 8 年前

找到这个,可能会帮你。

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

Mr Lister hawi 8 年前

嗯,你和你的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>

推荐文章

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

McRui · Laravel storeAs()存储问题中的图像

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

GabyUnalaq · 从原始RGB深度图像到灰度的转换不正确

2 年前

AayushPokharel · 如何在css中处理图像的alpha层?

2 年前

MHSarmadi · 阻止显示未完全加载的图像

2 年前

softandwet · 反应img onError未点火

2 年前

Nilesh soni · 颤振图像已缩放,但如何更改缩放位置

2 年前

Adheed nihal · 如果在jquery中超过了文件限制,如何清除用户上传的图像

2 年前

imcoding · img src属性上的vuejs数据绑定出现404错误

2 年前