使用3张图片创建按钮 [英] Create button using 3 images

问题描述

我有3张图像，一个应该重复的中央区块和两个末端部分(左和右).我希望能够使用这三张图片生成下面的按钮.

这是完成按钮.

抱歉，深色背景.

到目前为止，我已经有了此代码.

  li {背景图片:url(/images/middle.png)，url(/images/right.png)，url(/images/left.png);背景位置:中央，右侧，左侧；背景重复:repeat-x，n​​o-repeat，no-repeat；} 

哪个会生成此按钮.

任何人都知道为什么我的按钮看起来像它，以及如何呈现上方的第一个按钮?我必须使用3张给定的图像.不，这不是家庭/学校作业:)

我发现了

但是，在CSS3之前，每个HTML元素只能附加1个背景图片.您尝试附加3个，而CSS中的最后2个图像被忽略了.

找到的教程对于尝试创建的按钮类型是一个很好的解决方案.它定义了至少3个要附加图像的元素.他们使用4，但您只能使用3.

我认为到目前为止您的HTML看起来像这样:

 < ul>< li>< a href =#" title =我的文本按钮">我的文本</a></li></ul> 

因此，您需要附加2个元素；您至少还需要1个:

 < ul>< li class ="link-button">< a href =#" title =我的文本按钮">< span>我的文本</span></a></li></ul> 

应该这样做.然后是CSS:

  li.link-button {背景:url(/images/middle.png)repeat-x;}.link-button a {背景:url(/images/left.png)左中心不重复；}.link-button span {背景:url(/images/right.png)右中心不重复；} 

• jsFiddle

但是，中间的重复图像是不同的颜色！

I've 3 images, a center block that should be repeated and two end parts (left and right). I want to be able to generate the button below using these three images.

Here is the complete button.

Sorry for the dark background.

I've this code so far.

li {
  background-image: url(/images/middle.png), url(/images/right.png), url(/images/left.png);
  background-position: center, right, left;
  background-repeat: repeat-x, no-repeat, no-repeat;
}

Which generates this button.

Anyone knows why my button looks like it does and how to render the first button above? I must use the 3 given images. And no, this isn't an home/school assignment :)

EDIT: I found this tutorial on how to solve the problem. Isn't there a better way to solve the problem, maybe a more semantic way?

解决方案

Personally, I would try to keep it as simple as possible and use 1 repeat-x image across the middle of the button, and use CSS3 rounded corners to finish off the edges. Gracefully degrades as a square button. A good example is the "Download" button from JQueryUI.com:

---

If you only want to support CSS3 compliant browsers, then you can attach multiple images in background-image.

• Can I have multiple background images using CSS?

However, pre CSS3, you can only attach 1 background-image per HTML element. You tried to attach 3, and the last 2 images in your CSS are getting ignored.

The tutorial that you found is a good solution for the type of button you are trying to create. It defines at least 3 elements to attach images to. They use 4, but you can do it with only 3.

I assume that your HTML looks like this so far:

<ul>
  <li>
    <a href="#" title="My Text button">My Text</a>
  </li>
</ul>

So you have 2 elements for which to attach; you need at least 1 more:

<ul>
  <li class="link-button">
    <a href="#" title="My Text button"><span>My Text</span></a>
  </li>
</ul>

Should do it. Then the CSS:

li.link-button {
  background: url(/images/middle.png) repeat-x;
}
.link-button a {
  background: url(/images/left.png) left center no-repeat;
}
.link-button span {
  background: url(/images/right.png) right center no-repeat;
}

• jsFiddle

However, you middle repeating image is a different color!

这篇关于使用3张图片创建按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！