background-clip特性的通俗化功效便是特定元素情况所属的地区,有4种赋值
1、border-box
border-box是默认设置值，表明元素的情况从border地区（包含border）之内刚开始保存情况。
简易编码以下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat ⑸px;padding:5px;border:5px dotted #000;<br> background-clip:border-box;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
实际效果以下：
从上图大家能够看出，元素情况默认设置是存在于边框及之内的地区，可是不知道道为何加情况照片，不可以所有遮盖；而情况色调则没没这个难题。
2、padding-box
padding-box表明元素的情况从padding地区(包含padding)之内刚开始保存。
简易编码以下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat ⑸px;padding:5px;border:5px dotted #000;<br> background-clip:padding-box;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
实际效果以下：
从上图大家能够看出情况照片存在于padding及之内地区。
3、content-box
content-box表明元素的情况从內容地区之内刚开始保存。
简易编码以下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat ⑸px;padding:5px;border:5px dotted #000;<br> background-clip:content-box;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
实际效果以下：
从上图大家能够看出情况照片存在于內容地区之内。
4、text
content-box表明元素的情况保存在市场前景內容中（文本），和其样子尺寸同样,现阶段仅适用chrome访问器
简易编码以下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:380px;height:280px;margin:100px auto;background:red;padding:5px;border:5px dotted #000;<br> font-size:100px;font-weight；bold;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
</style>
</head>
<body>
<div class="box">你 好 你 好</div>
</body>
</html>
实际效果以下：
表明：现阶段值为text时，适配性极差，仅了解便可。
总结
以上所述是网编给大伙儿详细介绍的详解css中background-clip特性的功效，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
Copyright © 2002-2020 制作小程序_小程序商城_扫码点餐小程序_微信小程序开店的步骤_牛刀小程序 版权所有 （网站地图） 粤ICP备10235580号