background后面的属性,background后面加啥
1.CSS background属性与background-image属性
在书写css样式时,background属性与background-image经常用来设置背景图片,容易搞混。
background属性包含background-image属性,是在一个声明中设置所有的背景属性。
连background-image在内,background属性包含以下:
background-color ? ? 规定要使用的背景颜色。1
background-position ? ? 规定背景图像的位置。1
background-size ? ? 规定背景图片的尺寸。3
background-repeat ? ? 规定如何重复背景图像。1
background-origin ? ? ? ?规定背景图片的定位区域。3
background-clip ? ? 规定背景的绘制区域。3
background-attachment ? ? 规定背景图像是否固定或者随着页面的其余部分滚动。1
background-image ? ? 规定要使用的背景图像。1
inherit????规定应该从父元素继承 background 属性的设置。1
通常在写css的时候,一般都直接用background做全局设置,不单独去设置。
用background做全局设置时,要将所有背景属性写在一个声明中
body { background: red }
p { background: url("chess.png") 40% / 10em gray? round fixed border-box; }
分拆写法如下
body {
? ? background-color: red;
? ? background-position: 0% 0%;
? ? background-size: auto;
? ? background-repeat: repeat;
? ? background-clip: border-box;
? ? background-origin: padding-box;
? ? background-attachment: scroll;
? ? background-image: none }
p {
? ? background-color: gray;
? ? background-position: 40% 50%;
? ? background-size: 10em 10em;
? ? background-repeat: round;
? ? background-clip: border-box;
? ? background-origin: border-box;
? ? background-attachment: fixed;
? ? background-image: url(chess.png) }
? background:no-repeat scroll??0px 0px /? 300px 300px?? rgba(0, 0, 0, 0);
? background-position与background-size之间 必须用? / 做分割?
? 前面是background-position? 后面是 background-size?
background属性
background一共有8个属性,css2.1中5个,css3中加了3个。
background的可以简写为 :
背景颜色 支持多种类型
背景图片 尽量用引号包起来
重复图片
滚动或者固定背景
图片位置 支持3中类型: 百分比,单位,英文关键字。三种类型能混合着写
默认值为 0% 0%;
第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果仅定义一个值,另外一个为50%。
可以是px或其他单位。
第一个值是水平位置,第二个值是垂直位置。
左上角是 0 0。
如果仅定义一个值,另外一个为50%。
如果仅定义了一个关键字,另外一个为center
值: center top bottom left right
背景大小 有四种类型
设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
背景的相对定位
背景图像的 background-attachment 属性为 fixed ,则该属性没有效果。
规定背景的绘制区域
关于background后面参数的问题
是将背景图片进行定位的作用。right 6px可以单独用background-position设定。
其中background-position属性的属性值是你可以调节的,以左顶点为参考点,第一个right是对于水平x轴来说的与包含该背景图片的元素的右边重合,第二个6px是对于垂直y轴来说的向下移动6个px,这2个值你可以自己调节它的上下左右(right,left,center,top,bottom)。也可以用px值来调节!
我放个图片上去,你马上能看出这2个值的作用。