css实现背景裁剪

背景裁剪"/>

css实现背景裁剪

前面我们通过指定background-origin指定了渲染范围，还有个类似的属性，可以选择裁剪背景图片。

示例

<p>没有背景剪裁 (border-box没有定义):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

设置裁剪区域 background-clip: content-box;

#example1 {border: 10px dotted black;padding:35px;background: yellow;
}#example2 {border: 10px dotted black;padding:35px;background: yellow;background-clip: padding-box;
}#example3 {border: 10px dotted black;padding:35px;background: yellow;background-clip: content-box;
}

 默认采用border-box，在border-box区域渲染

 指定为padding-box，在padding-box渲染

 指定为content-box，在内容区域渲染