8000
We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
There was an error while loading. Please reload this page.
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
background-clip和background-origin取值可以为border-box,padding-box,content-box. 可以使用background-clip改变背景的填充方式。 background在盒子模型中,它布满整个元素的盒子区域,并不是从padding就开始填充,从border就开始。 给div添加样式可以明显看到。因为默认的background-origin是border-box. 需要注意的是background-color从元素的边框左上角起到元素的边框右下角。 background-origin的作用是让图片能在边框上显示 background-origin: border; 同样设置background-clip: border;看看是什么效果 发现图片从padding-box的左上定点开始显示 总结一下: background-clip规定背景的显示范围,是从border-box,还是padding-box或者content-box. background-origin规定背景从哪里开始绘制,决定background-position的参照点是border-box还是padding-box或者是content-box的左上角。 所以当设置
background-clip
background-color
background-origin: border;
background-clip: border;
background-origin
background-position
background-clip: padding-box; background-origin: border-box;
会出现背景图片被裁剪的效果,因为显示区域是从padding-box开始,虽然从border-box开始绘制。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
background-clip
和background-origin取值可以为border-box,padding-box,content-box.可以使用background-clip改变背景的填充方式。
background在盒子模型中,它布满整个元素的盒子区域,并不是从padding就开始填充,从border就开始。
给div添加样式可以明显看到。因为默认的background-origin是border-box.
需要注意的是
background-color
从元素的边框左上角起到元素的边框右下角。background-origin的作用是让图片能在边框上显示
background-origin: border;
同样设置
background-clip: border;
看看是什么效果发现图片从padding-box的左上定点开始显示
总结一下:
background-clip
规定背景的显示范围,是从border-box,还是padding-box或者content-box.background-origin
规定背景从哪里开始绘制,决定background-position
的参照点是border-box还是padding-box或者是content-box的左上角。所以当设置
会出现背景图片被裁剪的效果,因为显示区域是从padding-box开始,虽然从border-box开始绘制。
The text was updated successfully, but these errors were encountered: