1

我有一个使用图形并具有圆角的按钮。

为了使按钮 CSS 可重用，并且能够容纳任何长度的文本，同时仍然保持圆角，我想:after在主按钮之后添加结束圆角（因此第一个图像/文本可以增长并且圆角将始终固定在最后。）

当我添加内容（例如“测试”一词和一些背景颜色）时设法:after使其工作，但当样式上没有内容时无法使其工作。我只需要背景图像，仅此而已。

JSFiddle 与按钮。您可以看到:after代码，但由于某种原因，它没有显示。

#wizard-nav .paging:after
{ 
background-image:url("http://i.imgur.com/GDJgl.png");
height:22px;
width:7px;
}
4

2 回答 2

4

使用::before和::after伪选择器时，您需要将值设置为content.

伪元素也是内联元素，因此如果要定义高度或宽度，则必须将其显示为block元素。

例如：

#wizard-nav .paging::after {
    content: "";
    display: block; 
    background-image:url("http://i.imgur.com/GDJgl.png");
    height:22px;
    width:7px;
}

工作示例：http ://tinkerbin.com/GSO0HpD2

于 2013-01-07T14:21:53.663 回答
-1

你有一个替代你的背景图像。例如，您可以使用http://www.colorzilla.com/gradient-editor/生成它，而不是应用一些边框半径，只要您喜欢和边框，您就可以比在背景周围工作更快地获得相同的效果-像这样的图像。例如：

border:red 1px solid;
border-radius:10px;

顺便说一句 - 由于您的背景图像，它们没有出现。记下你的“。 http://jsfiddle.net/WZywh/这是一个例子

于 2013-01-07T14:21:23.663 回答