使用:before和sprite背景图片

时间:2013-04-12 16:17:20

标签: html css background-image pseudo-element

尝试在某个范围内使用:before在主要内容的边缘添加背景图片。

基本上应该是这样的:

enter image description here

我将三角形视为bg图像,但似乎无法使其正确显示或完全显示。

见JS小提琴:

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

3 个答案:

答案 0 :(得分:2)

如果你想

,你可以在没有图像的情况下这样做

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/

答案 1 :(得分:0)

我把它送到show up here,我想你可以得到其余的...... 我添加了display: block;并删除了您的背景位置规则。

答案 2 :(得分:0)

这里是
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; <-
}