×

用CSS3 background-clip裁剪背景

作者:jiang2017.09.29来源:Web前端之家浏览:13603评论:0

用CSS3 background-clip裁剪背景,这个方法应用很多。

* 用于指定background是否包含content之外的border,padding。默认值为border-box,即background从包含border在内的地方开始渲染,IE的默认表现也等同于border-box
背景裁剪(背景从border(即包括border在内)开始绘制(渲染)):


#background-clip-border{
	-moz-background-clip:border-box;           /* For Firefox */
	-webkit-background-clip:border-box;        /* For Chrome, Safari */
	-o-background-clip:border-box;             /* For Opera */
	-ms-background-clip:border-box;            /* For IE */
	background-clip:border-box;                /* For Future */
}

背景裁剪(背景从padding(即包括padding在内)开始绘制):

#background-clip-padding{
	-moz-background-clip:padding-box;           /* For Firefox */
	-webkit-background-clip:padding-box;        /* For Chrome, Safari */
	-o-background-clip:padding-box;             /* For Opera */
	-ms-background-clip:padding-box;            /* For IE */
	background-clip:padding-box;                /* For Future */
}

背景裁剪(背景从content(即内容部分)开始绘制):

#background-clip-content{
	-moz-background-clip:content-box;           /* For Firefox */
	-webkit-background-clip:content-box;        /* For Chrome, Safari */
	-o-background-clip:content-box;             /* For Opera */
	-ms-background-clip:content-box;            /* For IE */
	background-clip:content-box;                /* For Future */
}

背景裁剪(将背景裁剪作为文本的填充色):

* 貌似当前只有webkit内核浏览器支持

/* 如果你的浏览器支持text值,你将会看到本段文字的颜色直接使用了背景颜色:红色,且背景将被裁剪掉不再显示 */
#background-clip-text{
    background-color:#f00;
    -webkit-text-fill-color:transparent;
    -webkit-background-clip:text;               /* For Chrome, Safari */
    background-clip:text;                       /* For Future */
}

这个大家可以用下,有时候非常实用。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/article024FDFDF.html

网友评论文明上网理性发言 已有0人参与

发表评论: