欢迎光临
我们一直在努力

CSS3 | 背景图像区域(background-clip)

定义和用法

background-clip 属性规定背景的绘制区域。

默认值:border-box
继承性:no
版本:CSS3
语法 : background-clip: border-box|padding-box|content-box;

实例

我们创建一个盒子,边框设置为透明色,添加背景图,最后分别为background-clip设置不同的值查看展示效果。

当设置为background-clip: content-box时,背景图充斥content区域

.box{
	width: 100px;
	height: 100px;
	padding: 50px;
	border: 50px solid transparent;
	background-image: url(img/timg.png);
	background-size: 100% 100%;
	background-clip: content-box;
}

当设置为background-clip: padding-box时,背景图扩充到padding区域

.box{
	width: 100px;
	height: 100px;
	padding: 50px;
	border: 50px solid transparent;
	background-image: url(img/timg.png);
	background-size: 100% 100%;
	background-clip: padding-box;
}

当设置为background-clip: border-box时,背景图扩充到border区域

.box{
	width: 100px;
	height: 100px;
	padding: 50px;
	border: 50px solid transparent;
	background-image: url(img/timg.png);
	background-size: 100% 100%;
	background-clip: border-box;
}
赞(1) 打赏
未经允许不得转载:散人研 » CSS3 | 背景图像区域(background-clip)
分享到: 更多 (0)

评论 抢沙发

5 + 9 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏