详解css中background-clip属性的作用
我要评论background-clip属性的通俗作用就是指定元素背景所在的区域,有四种取值
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 -5px;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 -5px;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 -5px;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属性的作用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
CSS3基于背景裁剪（background-clip）实现的文本标题透视特效源码
这是一款CSS3基于背景裁剪（background-clip）实现的文本标题透视特效源码。画面上的外星球与飞船背景中央呈现出带有背景剪切透视的文本视觉效果。同时可响应鼠标的移动呈2017-11-17CSS3中background-clip和background-origin的区别示例介绍
本文为大家介绍下CSS3中background-clip和background-origin的区别，感兴趣的朋友可以参考下2014-03-10深入浅出CSS3 background-clip,background-origin和border-image教程
最近在准备一个下学期参加比赛的概念网站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但仅仅是依靠w3schools上的文档2011-01-27CSS3教程：background-clip和background-origin-CSS教程-网页制作-网页
原文：http://www.planabc.net/2008/04/14/background-clip_background-origin/ background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来2008-10-17详解CSS3中的box-sizing（content-box与border-box）
这篇文章主要介绍了CSS3中的box-sizing（content-box与border-box）的相关资料,需要的朋友可以参考下2019-04-19- 这篇文章主要介绍了浅谈CSS3 box-sizing 属性 有趣的盒模型 ,需要的朋友可以参考下2019-04-02
- 一说到CSS的盒模型(Box model)我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性，box-sizing 属性允许您以特定的方式定义匹2015-04-09
- 这篇文章主要介绍了CSS3属性box-sizing使用指南,需要的朋友可以参考下2014-12-09
- CSS3 box-sizing属性，在很多新手朋友来看是比较陌生的,接下来介绍CSS3 box-sizing使用及注意部分，感兴趣的朋友可以了解下2013-01-08
解决CSS 中box-sizing与background-clip解决背景显示范围的问题
这篇文章主要介绍了CSS box-sizing与background-clip解决背景显示范围的问题，主要用这篇文章给大家做个记录，避免大家遇到此类问题，感兴趣的朋友跟随小编一起看看吧2019-05-13
最新评论