我正在尝试使用三个背景图像制作一个按钮,以便我们可以为按钮的文本提取翻译并进行良好的扩展。我们可能会为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-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。
有什么明显的东西我缺失或做错了吗?关于如何完成这项工作的任何建议将不胜感激。
修改
由于我得到了很多“工作”的答案,我会在Chrome,FF和IE9中找到最合适的答案。
编辑2
我已经尝试了所有答案,但在IE9中都没有。我们必须支持IE9(和IE8,但我现在不会去那里)。我要开始赏金。任何能够提供适用于IE9,Firefox和Chrome的答案的人都可以获得它。
答案 0 :(得分:7)
伪内容需要content,因此您首先需要指定:
.selector::before {
content: ' ';
}
然后,要定义任何布局,例如宽度和高度,您需要将伪元素显示为block
或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;
}
答案 1 :(得分: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;
}
之前和之后的定义略有相同,所以你可以更紧凑地写下它,但无论如何你需要重新制作它。 ;)
提示:请注意,下载三张图片效率较低。您可以创建一个图像,其中包含顶部的起点和终点,以及底部的中间部分。通过定位背景,您可以在元素内显示正确的部分。这种技术称为sprites
,它减少了要求的数量。
答案 2 :(得分: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 ”是按钮的宽度,因此,如果所有按钮的大小相同,则不应该出现问题)
答案 3 :(得分: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:)
答案 4 :(得分: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;
}
答案 5 :(得分: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 =右图