如何裁剪背景图像在CSS

其实我就是我有一个透明背景条纹图像，我将在我的DIV的背景重复，但我想裁剪三角类型的图像，这样我可怎么办与CSS如何裁剪背景图像在CSS

其实像我所 enter image description here

和预期的结果，我想实现像下面提到图像透明条纹图像S O如何我可以在CSS enter image description here

来源

2012-10-09 Shailender Arora

这对我来说有点不清楚，你能提供您有试过代码，这可能会帮助我。 –

赞同这个................... http：//tinkerbin.com/GsG4hJOp –

你可以使用条纹背景multipal divs在乘法divs来创建效果吗？ – Champ

enter image description here

裁剪这张图片，如果你能设法使用带背景multipals倍（管理条不不匹配），那么这是你需要做的DEMO什么

<div id="d1"> 
    <div id="d2"></div> 
    <div id="d3"></div> 
    <div id="d4"></div> 
</div>

CSS

#d1 {background:#f00; 
height: 80px; 
width: 400px; position:relative} 

#d4{background:rgba(0,0,0,.5);height:80px; width:340px; left:60px; position:absolute;} 

#d2{position:absolute;font-size:0px;left:20px;width: 0px; border-top: 40px solid red; 
border-right: 40px solid rgba(0,0,0,.5);-webkit-transform:rotate(270deg);} 

#d3{position:absolute;font-size:0px;left:20px;top:40px;width: 0px; 
border-top: 40px solid red; 
border-right: 40px solid rgba(0,0,0,.5);}

编辑：更新的链接

来源

2012-10-09 12:59:44 Champ

这是我的结果：

just a demo

Demo

注：我用rgba背景做了，但我敢肯定，你可以做它也与border-image。

HTML：

<div id="bgWrapper"> 
<div id="retina"></div> 
</div>

CSS：

#bgWrapper { 
    background:url(main-background-image.jpg) top left no-repeat; 
    height:6em; 
    position:relative; 
} 
#retina { 
    position:absolute; 
    top:0; left:8em; right:0; bottom:0; 
    background:rgba(255,255,255,0.4); 
} 
#retina:before { 
    content:" "; 
    position:absolute; 
    top:0; left:-6em; bottom:0; 
    width:3em; 
    border-left:3em solid transparent; 
    border-top:3em solid rgba(255,255,255,0.4); /* same as #retina background */ 
    border-bottom:3em solid rgba(255,255,255,0.4); /* same as #retina background */ 
}

来源

2012-10-09 13:02:15 Giona

如何裁剪背景图像在CSS

回答

相关问题