8000 background-clip属性和background-origin属性 · Issue #2 · Vxee/articles · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

background-clip属性和background-origin属性 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vxee opened this issue Jun 27, 2018 · 0 comments
Open

background-clip属性和background-origin属性 #2

Vxee opened this issue Jun 27, 2018 · 0 comments

Comments

@Vxee
Copy link
Owner
Vxee commented Jun 27, 2018

background-clip和background-origin取值可以为border-box,padding-box,content-box.
可以使用background-clip改变背景的填充方式。
background在盒子模型中,它布满整个元素的盒子区域,并不是从padding就开始填充,从border就开始。
给div添加样式可以明显看到。因为默认的background-origin是border-box.
image
需要注意的是background-color从元素的边框左上角起到元素的边框右下角。
background-origin的作用是让图片能在边框上显示
background-origin: border;
image
同样设置background-clip: border;看看是什么效果
image
发现图片从padding-box的左上定点开始显示
总结一下:
background-clip规定背景的显示范围,是从border-box,还是padding-box或者content-box.
background-origin规定背景从哪里开始绘制,决定background-position的参照点是border-box还是padding-box或者是content-box的左上角。
所以当设置

background-clip: padding-box;
background-origin: border-box;

会出现背景图片被裁剪的效果,因为显示区域是从padding-box开始,虽然从border-box开始绘制。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant
0