按钮使用三（3）背景图像css [英] Button using three (3) background images css

问题描述

我试图使用三个背景图片做一个按钮，这样我们可以拉动翻译的按钮的文本，并很好地展开。我们可能为IE8添加一个基本样式，但我们的设计师希望我们使用这种样式，我们不能用纯CSS3很好地重现它。

I'm trying to make a button using three background images so that we can pull in translations for the the text of the button and expand nicely. We'll probably add a base style for IE8 but our designer wants us to use this style and we couldn't recreate it nicely with pure CSS3.

这里是图像：

Here are the images:

这里是HTML（只是一个简单的按钮，但我认为我应该把它：

Here's the HTML (just a simple button, but thought I should put it anyway:

<button class="back clickable" aria-label="Back" onclick="javascript:history.back();">Back</button>

我已经尝试过一些事情;我将粘贴CSS

I've already tried a couple of things; I'll paste the CSS of both attempts.

尝试1：使用伪选择器

http://jsfiddle.net/c2B6X/

Attempt 1: Using Pseudo-selectors
http://jsfiddle.net/c2B6X/

.back {
    background: url("images/back-middle.png") 14px 0 repeat-x;
    color: $white;
    height: 28px;
    padding: 5px;
    &:before {
        background: url("images/back-front.png") 0 0 no-repeat;
        width: 14px;
    }
    &:after {
        background: url("images/back-end.png") 100% 0 no-repeat;
        width: 8px;
    }
}

尝试2：三个背景-image s

http://jsfiddle.net/nPUQN/

.back {
    background: none;
    background-image: url("images/back-middle.png"), url("images/back-end.png"), url("images/back-front.png");
    background-position: 14px 0, 100% 0, 0 0;
    background-repeat: repeat-x, no-repeat, no-repeat;
    border-right: 8px transparent;
    border-left: 14px transparent;
    color: $white;
    height: 28px;
    padding: 5px;

}

CSS因为我们使用的是SASS。

If it looks like atypical CSS that's because we're using SASS.

有没有明显我错过或做错了？

Is there something obvious I'm missing or doing wrong? Any advice on how to make this work would be greatly appreciated.

编辑

由于我有这么多的答案， work，我会在Chrome，FF和IE9中标记正确的答案。

EDIT
Since I got so many answers that "work", I'll mark correct the answer that works best in Chrome, FF and IE9.

EDIT 2

我试过所有的答案，没有工作在IE9。我们必须支持IE9（和IE8，但我现在甚至不会去那里）。我要开始赏金。

EDIT 2
I've tried all answers and none work in IE9. We have to support IE9 (and IE8, but I won't even go there for now). I'm going to start a bounty. Anyone who can supply an answer that works for IE9, Firefox and Chrome gets it.

推荐答案

伪内容需要内容，因此您需要先指定：

Pseudo-content requires content, so you'll first need to specify that:

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

然后定义任何布局，如宽度和高度，伪元素作为块或 inline-block 。块布局将强制每个伪元素换行， inline-block 将位于行上，因此您必须使用浮动或绝对定位。

Then to define any layout such as width and height you'll need to display the pseudo elements as a block or inline-block. Block layout will force each pseudo element to wrap and inline-block will sit on the line so you'll either have to use floats or absolute positioning.

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

演示： http://codepen.io/anon/pen/yaJGI

这篇关于按钮使用三（3）背景图像css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！