Html 按钮使用三（3）个背景图像css

我正在尝试使用三个背景图像制作一个按钮，这样我们就可以为按钮的文本引入翻译并很好地展开。我们可能会为IE8添加一个基本样式，但我们的设计师希望我们使用这种样式，而我们无法用纯CSS3很好地重新创建它

以下是图片：

这是HTML（只是一个简单的按钮，但我想我还是应该把它放进去：

返回

我已经尝试了两种方法；我将粘贴两种尝试的CSS

尝试1：使用伪选择器

.back{
背景：url（“images/back middle.png”）14px 0 repeat-x；
颜色：$白色；
高度：28px；
填充物：5px；
&：之前{
背景：url（“images/back-front.png”）0 0 0不重复；
宽度：14px；
}
&：之后{
背景：url（“images/back-end.png”）100%0无重复；
宽度：8px；
}
}

尝试2：三个

背景图像
s


.back{
背景：无；
背景图片：url（“images/back-middle.png”）、url（“images/back-end.png”）、url（“images/back-front.png”）；
背景位置：14px0，100%0，0；
背景重复：重复-x，不重复，不重复；
右边框：8px透明；
左边框：14px透明；
颜色：$白色；
高度：28px；
填充物：5px；

}

如果它看起来像非典型CSS，那是因为我们使用的是SASS

是否有一些明显的我遗漏或做错了？任何关于如何使这项工作的建议将不胜感激

编辑

因为我得到了太多“有用”的答案，所以我会选择在Chrome、FF和IE9中效果最好的答案

编辑2

我尝试了所有答案，但没有一个在IE9中起作用。我们必须支持IE9（和IE8，但我现在甚至不去）。我将开始悬赏。任何能够提供适用于IE9、Firefox和Chrome的答案的人都可以得到它。
伪内容要求，因此您首先需要指定：

.selector::before {
  content: ' ';
}

然后，要定义任何布局（如宽度和高度），您需要将伪元素显示为
块
或
内联块
。块布局将强制每个伪元素换行，而
内联块
将位于直线上，因此您必须使用浮动或绝对定位

.selector {
  position: relative;
  height: 28px;

  /* allow for the pseudo-elements which do not have layout due to absolute positioning */
  margin: 0 15px;
}
.selector::before,
.selector::after {
  content: ' ';
  position: absolute;
  top: 0;
  width: 15px;
  height: 28px;
}
.selector::before {
  left: -15px;
}
.selector::after {
  right: -15px;
}

这里为您演示：
您需要添加
：before
和
：after
的内容来显示。之后，您可以绝对定位它们，通过分别给它们
right:100%
和
left:100%
，您可以将它们定位在按钮的前面和后面

button {
  background:transparent;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 12px;
  cursor: pointer;
  margin-left: 14px; /* width of :before */
}
.back {
    background: url("http://i.stack.imgur.com/DaQcG.png") 14px 0 repeat-x;
    color: white;
    height: 28px;
    padding: 5px;
    position: relative;
}
.back:before {
        position: absolute;
        content: "";
        height: 28px;
        top: 0;
        right: 100%;
        background: url("http://i.stack.imgur.com/6m2HC.png") 0 0 no-repeat;
        width: 14px;
    }
.back:after {
        position: absolute;
        content: "";
        height: 28px;
        top: 0;
        left: 100%;
        background: url("http://i.stack.imgur.com/2WA5B.png") 100% 0 no-repeat;
        width: 8px;
    }

before和after的定义稍有相同，因此您可以更简洁地写下它，但无论如何您都需要重新命名它。；）


提示：请注意，下载三幅图像的效率较低。您可以创建一个图像，其中包含顶部的起点和终点，以及底部的中间部分。通过定位背景，可以显示元素中的右侧部分。这种技术被称为，它减少了请求的数量。
我想出了一个小办法，你可以看看。您可以修改它以最适合您的需要


HTML:

（“背景大小：30px”是按钮的宽度，因此如果所有按钮的大小都相同，这应该不会有问题）
我今天使用了这段代码。它与第二个示例类似，但使用了背景快捷方式属性和位置字符串的混合

background: url("../images/img01.png") 0px 0px no-repeat, url("../images/img02.png") 53px 0px repeat-x, url("../images/img03.png") right top no-repeat;

img01=左图像（53px宽）

img02=填充图像

img03=右图像
对于多背景版本，您可以添加渐变或白色图像来构建按钮背景，并保留一些填充空间。

为chrome添加前缀，添加所需的其他前缀或使用前缀js:）
我添加此答案是因为我喜欢保持其他前缀不变。
在IE8/9中对该装置进行试验，试验位置为：
或编辑：

希望你看到了。为什么命名变量
$white
？如果你想让颜色变成蓝色呢？在IE9中没有。我将在周一回来工作时再次访问。：）请注意，在IE8中，多个背景不起作用。这是一个很好的技巧，但在我看来不够灵活，如果字体大小、字母间距增大或使用其他字体，则可能会有一个白点；）所以你的意思是，你不打算每次都是同样大小的。我什么也不打算，只是一直在发生的事情：），用户有自己的浏览器和设置，字体的处理方式是最难控制的。我说过，它的大小会根据本地化字符串的长度而变化。它不适合不同的尺寸。我试着大胆一点，但都没用。哦，好吧，我明白了。这就是我现在所知道的全部。好吧，反正不使用javascript。是的，当我们从设计中获得所有图标时，我们将使用spritemap。因此，如果您使用sprite，请考虑在开始/结束按钮下设置一些白点。白点？我不知道你这是什么意思。我认为这是关于在精灵周围保留一些空间，以防位置偏离一个像素，这有时可能会发生，尤其是当页面被缩放时。啊，是的，精灵地图中总是有额外的空白。我已经用真实的图像为你的笔分叉，以使它更高效，如“如何”：；）+1表示内容：“”；如果你将溢出设置为按钮上可见，这将在IE9中起作用：或者我觉得我应该在我喜欢的机器人之间分配赏金，@cimmanon，因为是你们三个人把我需要的答案放在一起。我喜欢的机器人完成了大部分工作。当我们对现有答案做出贡献而不是提供自己的答案时，我们知道自己将陷入什么境地。重要的是你得到了你的答案，我们都很享受；）在FF和Chrome中运行良好，但图像不起作用
.back {
    border: none;
    height: 28px;
    padding-right: 8px;
    padding-left: 14px;
    background-image: url("http://i.stack.imgur.com/DaQcG.png"),             
        url("http://i.stack.imgur.com/6m2HC.png"), 
        url("http://i.stack.imgur.com/2WA5B.png");
    background-position: 14px 0px, left, right;
    background-size: 30px 100%, 14px 28px, 8px 28px;
    background-repeat:  no-repeat,no-repeat,no-repeat;
}

background: url("../images/img01.png") 0px 0px no-repeat, url("../images/img02.png") 53px 0px repeat-x, url("../images/img03.png") right top no-repeat;

.back {
    background:
        url("http://i.stack.imgur.com/2WA5B.png") 100% 0 no-repeat ,
        url("http://i.stack.imgur.com/6m2HC.png") 0 0 no-repeat,
       -webkit-linear-gradient(0deg, white 0, white 14px , transparent 14px ,transparent) 0 0 no-repeat ,
        -webkit-linear-gradient(180deg, white 0, white 8px , transparent 8px ,transparent) 0 0 no-repeat ,
        url("http://i.stack.imgur.com/DaQcG.png") 14px 0 repeat 
        ;
    color: $white;
    height: 28px;
    padding: 5px 8px 5px 14px;
}

.back {
    background:
        url("http://i.stack.imgur.com/DaQcG.png") 14px 0 repeat 
        ;
    color: white;
    height: 28px;
    padding: 5px;
  position:relative;
  overflow:visible;
}
.back:before {
  content:url(http://i.stack.imgur.com/6m2HC.png);
  top:0;
  left:-14px;
  position:absolute;
}
.back:after {
  content:url(http://i.stack.imgur.com/2WA5B.png);
  position:absolute;
  right:-8px;
  top:0;
}