CSS3 background-origin，background-clip的比较

来源：互联网发布：手机淘宝怎么发帖子编辑：程序博客网时间：2024/04/20 12:11

background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性，都有border、padding、content三种。

background-origin定义背景位置起始点；

background-clip定义对背景（图片和颜色）的切割。

1.background-origin

　　我们来看一下例子：

　　我们来看一下style样式：

 .bg{            width: 100px;            height: 100px;            padding:50px;            border: 10px dashed #000000;            background: #ffff00 url('pic1.gif') no-repeat;            margin-top: 10px;            display: inline-block;        }        .bg_origin_border{            background-origin: border-box;   //背景从border边开始                  }        .bg_origin_padding{            background-origin: padding-box;  //背景从padding开始        }        .bg_origin_content{            background-origin: content-box;  //背景从实际内容开始        }

　　下面我们把注释打开，来进一步验证backgroung-origin。

2.backgroung-clip

　　我们还是直接来看例子：

　　样式：

 .bg_clip_border{            background-clip: border-box;   //裁剪保留到border        }        .bg_clip_content{            background-clip: content-box;  //本来靠齐顶部，裁剪只留实际内容，裁剪后都是白色        }        .bg_clip_padding{            background-clip: padding-box;  //裁剪只留到padding，裁剪后都是白色        }

　　我们接着把注释去掉：

　　这就印证了background-clip只是将背景和背景色粗暴的裁剪。

0 0