CSS3中background-clip和background-origin的区别示例介绍

ttx9n · 发表于 2014-3-10 17:06:57

本文为大家介绍下CSS3中background-clip和background-origin的区别，感兴趣的朋友可以参考下相信除了我以外，还有不少童鞋在学习到background-clip和background-origin的时候都很疑惑，这俩哥们儿到底啥区别。

想搞清楚它们的区别还不简单？且看下面的DEMO：

复制代码代码如下:
.test {
background-image: url(pic.jpg);
background-clip: border-box;
background-origin: border-box;
border: 20px dashed black;
}

复制代码代码如下:
.test {
background-image: url(pic.jpg);
background-clip: border-box;
background-origin: padding-box;
border: 20px dashed black;
}

复制代码代码如下:
.test {
background-image: url(pic.jpg);
background-clip: padding-box;
background-origin: border-box;
border: 20px dashed black;
}

由于鄙人比较懒，就不放效果图了，有兴趣的童鞋可以自己去试试，这里可以看出，实际上background-clip决定的是背景从哪个区域开始显示，而background-origin决定的是背景从哪个区域开始绘制。

雪龙Ui79 · 发表于 2023-1-9 06:42:03

啦啦啦啦啦德玛西亚

7jbiiz · 发表于 2023-1-28 07:31:26

的vgdsvsdvdsvdsvds

wangdj110 · 发表于 2023-3-4 14:30:27

的vgdsvsdvdsvdsvds

平平安安 · 发表于 2023-9-6 06:06:05

管灌灌灌灌灌灌灌灌灌灌

adm1n · 发表于 2023-9-11 12:40:22

看看看看

czoz5y · 发表于 2023-10-8 18:18:40

谢谢您的分享！

4k0mp7m · 发表于 2024-3-21 04:47:53

啊，数码撒飒飒飒飒

9jduu05 · 发表于 2024-4-4 05:09:44

借款金额看了就立刻

溪谷小兵 · 发表于 2024-4-4 17:17:23

哈哈哈哈哈哈

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS3中background-clip和background-origin的区别示例介绍

相关帖子