使用 :before 和 sprite 背景图像答案

【问题标题】：Using :before and sprite background images使用 :before 和 sprite 背景图像
【发布时间】：2013-04-12 16:17:20
【问题描述】：

尝试在跨度上使用:before 在主要内容的边缘添加背景图像。

基本上应该是这样的：

我将三角形作为背景图像，但似乎无法使其正确放置，或者根本无法显示。

参见 JS Fiddle：

http://jsfiddle.net/Y6rMs/1/

【问题讨论】：

标签： html css background-image pseudo-element

【解决方案1】：

如果你愿意的话，你可以在没有图像的情况下做到这一点

http://jsfiddle.net/Y6rMs/26/

#bottomWide span.ribbon:before {
    content: "";
    width: 0; 
    height: 0; 
    position: absolute;
        top:0;
        left: -40px;
    border-top: 20px solid transparent; 
    border-right: 40px solid #0099ff; 
    border-bottom: 20px solid transparent;
}

这里列出了您可以使用 css 创建的其他一些形状 http://css-tricks.com/examples/ShapesOfCSS/

【讨论】：

这个有什么支持？ IE？
:before 和 :after 仅在 IE8+ 中支持，其他主流浏览器应该没有问题。这是一个不错的图表：css-tricks.com/browser-support-pseudo-elements

【解决方案2】：

我把它交给show up here，我想你可以得到剩下的...... 我添加了display: block; 并删除了您的背景位置规则。

【讨论】：

其他一些修复：jsfiddle.net/3MhZt（将背景从 .ribbon 移动到 a，为位置添加了边距）。

【解决方案3】：

在这里
jsfiddle.net/trajce/Y6rMs/27/

#bottomWide span.ribbon{
    position:relative;
    background-color:#C1C976;
    padding:5px 2%;
    float:right; 
}
#bottomWide span.ribbon:before{
    content:'';
    height:38px;
    width:25px;
    background-image:url(http://i.imgur.com/7nrYgTn.png);
    background-position:center left; <-
    background-repeat:no-repeat;
    position:absolute; 
    top:0;
    left:-30px; <- just play with this values a bit
    height:40px; <-
    width:30px; <-
}

【讨论】：

有，我不知道你怎么看不到。检查错误的小提琴，或者您应该清除浏览器缓存。
好的.. 似乎是 jsfiddle 的缓存问题。一旦我单独加载图像，它就开始出现......忽略。