2

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

以下是图片：
按钮前端 微小的中间部分重复 纽扣圆形端件

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

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

我已经尝试了几件事；我将粘贴两次尝试的 CSS。

尝试 1：使用伪选择器
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：三个background-images
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。

有什么明显的我遗漏或做错了吗？任何有关如何使这项工作的建议将不胜感激。

编辑
由于我得到了这么多“有效”的答案，我将标记正确的答案在 Chrome、FF 和 IE9 中效果最好。

编辑 2
我已经尝试了所有答案，但在 IE9 中都没有。我们必须支持 IE9（和 IE8，但我暂时不会去那里）。我要开始赏金了。任何可以提供适用于 IE9、Firefox 和 Chrome 的答案的人都会得到它。

4

6 回答 6

7

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

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

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

.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

于 2013-07-12T23:39:24.883 回答
2

您需要为: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 的定义略有相同，所以你可以写得更紧凑，但无论如何你都需要重新定义它。;)

http://jsfiddle.net/c2B6X/

提示：请注意，下载三个图像的效率较低。您可以创建一个图像，其中包含顶部的开始和结束，以及底部的中间部分。通过定位背景，您可以在元素内显示正确的部分。这种技术被称为sprites，它减少了请求的数量。

于 2013-07-12T23:43:53.387 回答
1

我想出了一个小东西，你可以看看。您可以对其进行修改以最适合您的需求。

http://jsfiddle.net/Xy7Hv/1/

HTML：

<button class="back">Back</button>

CSS：

.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-size: 30px ”是按钮的宽度，所以如果你所有的按钮都是相同的大小，那应该不是问题）

于 2013-07-13T00:00:49.710 回答
1

使用您的多背景版本，您可以添加渐变或白色图像来构建您的按钮 bg ，并使用填充保留一些空间。 http://jsfiddle.net/nPUQN/1/ 

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

为 chrome添加前缀，添加其他所需的前缀或使用前缀 js :)

于 2013-07-13T00:09:35.840 回答
1

我添加这个答案是因为我喜欢保持另一个原样。这个要在 IE8/9 中使用伪和位置进行测试： http: //codepen.io/gcyrillus/full/lBpaI或编辑： http ://codepen.io/gcyrillus/pen/lBpaI

.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;
}
于 2013-07-15T21:32:40.553 回答
0

我今天使用了这个代码。它类似于您的第二个示例，但使用背景快捷方式属性和位置字符串的混合。

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 = 右图

于 2013-07-13T00:06:37.617 回答