background后面的属性,background后面加啥

http://www.itjxue.com  2023-01-23 19:32  来源:未知  点击次数: 

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个值的作用。

(责任编辑:IT教学网)

更多

推荐金山WPS文章