1.background-size:auto || || ||cover ||cantain
cover: 放大铺满,但会使图片失真
contain:保持北京图片本身的比例,将图片缩放至宽或者高正好适应所定义北京容器区域
支持 IE9+ Firefox3.6+ chrome 4.0+ oprea 10+ sarfri 3+
2.background-break:bounding-box || each-box || continuous 内联元素背景图片平铺循环方式
*仅firefox支持
*在css3 有多图片的设置,但是需要注意的是“background-color”只能设置一个值,设置多个是致命的语法错误
css3多背景有层次之分,叠放的顺序为从上往下指定,即最先声明的背景在最上层
3.background-origin:指定背景图片的起点
参数:旧 padding border center
新 padding-box border-box center
浏览器默认:padding-box
padding-box:从padding外线开始
border-box:从border外线开始
center:从center外线开始,也就是padding内线开始
4.background-clip 控制背景展示区域,取值去background-origin 一致
注意:background-attachment 取值为 fixed时,一般运用在html或者body标签上才有背景固定效果,且如果设定为“fixed”,background-origin不起作用
本文深入解析CSS背景属性,包括auto、cover、contain、padding-box、border-box等特性,以及背景平铺循环方式、背景起源和背景裁剪等功能。详细介绍了各参数在不同浏览器的支持情况,并通过实例演示如何灵活运用这些属性以实现美观且兼容性强的布局效果。
955

被折叠的 条评论
为什么被折叠?



