background 笔记1

来源：互联网发布：程序员常用画图工具编辑：程序博客网时间：2024/06/11 23:59

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不起作用

0 0