cssbackground参数设置问题
日月潭资料背景属性详解
background-repeat
background-repeat 属性⽤来设置背景图像的铺排填充⽅式, 默认值: repeat 。
取值说明:
repeat-x 表⽰横向上平铺, 相当于设置两个值 repeat no-reapeat;
repeat-y 表⽰纵向上平铺, 相当于设置两个值 no-repeat repeat;
repeat 表⽰横向纵向上均平铺;
no-repeat 表⽰不平铺;
round 表⽰背景图像⾃动缩放直到适应且填充满整个容器。 注意: 当设置为 round 时, background-size 的 cover 和 contain 属性失效。
space 表⽰背景图像以相同的间距平铺且填充满整个容器或某个⽅向. 注意: 当 background-size 设置为 cover 和 contain 时, background-rapeat 的 space 属性失效。
注意：
background-repeat 的 round/space 属性, 部分Firefox版本不⽀持。
提供⼀个参数，则表明作⽤于两个⽅向；提供两个参数时，第⼀个作⽤于x轴，第⼆个作⽤于y轴
background-attachment
background-attachment 属性⽤来设置背景图像是随对象内容滚动还是固定的，默认值 scroll。
取值说明:
fixed 背景图像相对窗体固定，即内容滚动时，图⽚不动;
羊皇后scroll 相对元素固定，背景图像跟随元素本⾝，元素内容滚动时背景图像不动;
local 相对元素内容固定，背景图像跟随元素内容。
scroll与local区别的体现：
翻来覆去是什么意思
当元素设置overflow: auto 时，滚动的是元素的内容
scroll属性值：背景图像跟随元素本⾝，元素本⾝没有滚动，所以背景图像不动;
local属性值：背景图像相对元素内容固定，跟随元素的内容⼀起滚动。
background-position
background-position 属性⽤来设置背景图像的位置, 默认值: 0% 0%, 效果等同于 left top。
取值说明:
如果设置⼀个值, 则该值作⽤在横坐标上, 纵坐标默认为50%(即center) ;
如果设置两个值, 则第⼀个值作⽤于横坐标, 第⼆个值作⽤于纵坐标, 取值可以是⽅位关键字[left\top\center\right\bottom], 如background-position: left center ; 也可以是百分⽐或长度, 百分⽐和长度可为设置为负值, 如: background-position: 10% 30px ; css3⽀持3个值或者4个值, 注意如果设置3个或4个值, 偏移量前必须有关键字, 如: background-position: right 20px bottom 30px;⽰例图如下:
background-position的超级⽤法
可使⽤ background-position-x 或 background-position-y 来分别设置横坐标或纵坐标的偏移量。
注意: 当使⽤ background-position-x 以及 background-position-y 时, 需考虑Firefox兼容性的问题。
background-origin
⽤于设置 background-position 定位时参考的原点, 默认值 padding-box , 另外还有两个值: border-box 和 content-box。
background-clip
⽤于指定背景图像向外裁剪的区域, 默认值 border-box , 另外还有两个值: padding-box 和 content-box。
注意:
background-origin 的默认值为 padding-box;
即背景图像 background-position的默认定位原点为padding区域;
为更好的了解 background-clip 属性值的特性, 可将 background-origin 设置为 border-box 。
代码⽰例:
关于海洋的手抄报background-color: #58a;我的上司女友
background-image:url("image.png");
background-repeat: no-repeat;
background-size: 120px 100px;
border: 10px dashed #fb3;
秋筱宫
padding: 30px;
background-origin: border-box;
⽰例图:
background-size
background-size 属性⽤来指定背景图像的⼤⼩。默认值: auto
取值说明:
可使⽤ 长度值 或 百分⽐ 指定背景图像的⼤⼩, 值不能为负值
设置⼀个值, 则⽤于定义图像的宽度, 图像的⾼度为默认值 auto, 且根据宽度进⾏等⽐例缩放;
设置两个值, 则分别作⽤于图像的宽和⾼。
auto 默认值, 即图像真实⼤⼩。
cover 将背景图像等⽐缩放到完全覆盖容器, 背景图像有可能超出容器。(即当较短的边等于容器的边时, 停⽌缩放)
contain 将背景图像等⽐缩放到宽度或⾼度与容器的宽度或⾼度相等, 背景图像始终被包含在容器内。(即当较长的边等于容器的边时, 停⽌缩放)
⽰例图如下:
图⽚: 宽640px ⾼448px, 容器: 宽200px ⾼200px
**
background属性的简写⽤法
**
background 提供简写⽤法，即在⼀个声明中可设置所有的背景属性。
所有属性如下:
background-image: 设置背景图像, 可以是真实的图⽚路径, 也可以是创建的渐变背景;
background-position: 设置背景图像的位置;
background-size: 设置背景图像的⼤⼩;
background-repeat: 指定背景图像的铺排⽅式;
background-attachment: 指定背景图像是滚动还是固定;
background-origin: 设置背景图像显⽰的原点[background-position相对定位的原点];
background-clip: 设置背景图像向外剪裁的区域;cf鼠标宏
background-color: 指定背景颜⾊。
建议顺序如下: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip
注意:
顺序并⾮固定
background-position 和 background-size 属性, 之间需使⽤/分隔, 且position值在前, size值在后。
如果同时使⽤ background-origin 和 background-clip 属性, origin属性值需在clip属性值之前, 如果origin与clip属性值相同, 则可只设置⼀个值。
代码⽰例:
background: url(“image.png”) 10px 20px/100px no-repeat content-box;
设置多组复合属性
background是⼀个复合属性, 可设置多组属性, 每组属性间使⽤逗号分隔, 其中背景颜⾊不能设置多个且只能放在最后⼀组。
如设置的多组属性的背景图像之间存在重叠, 则前⾯的背景图像会覆盖在后⾯的背景图像上。
代码⽰例:
padding: 10px;
background:url("image.png") 0% 0%/60px 60px no-repeat padding-box, url("image.png") 40px 10px/110px 110px no-repeat content-box,
url("image.png") 140px 40px/200px 100px no-repeat content-box #58a；效果图如下:
二年级二班
多层背景图像效果图
