~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Dreamweaver

作者：苏恩祺

撰写时间：2021/10/18

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color 背景颜色background-image 背景图像background-repeat 设置背景图像在页面的水平或者垂直方向平铺与否。background-attachment 背景图像是否固定或者随着页面的其余部分滚动background-position 背景图像定位

1、background-color属性值可以用十六进制、英文、rgb（）

body { background-color:yellow; }

h1 { background-color:#00ff00; }

p { background-color:rgb(255,0,255); }

上面三种写法都是可以的

2、background-image

body {

background-image:url('paper.gif');

background-color:#cccccc;

}

url()指向背景图像的文件路径

元素的大小包括内边距，不包含边框；

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

属性值

值

说明

url('URL')

图像的URL

none

无图像背景会显示。这是默认

linear-gradient()

创建一个线性渐变的 "图像"(从上到下)

radial-gradient()

用径向渐变创建 "图像"。 (center to edges)

repeating-linear-gradient()

创建重复的线性渐变 "图像"。

repeating-radial-gradient()

创建重复的径向渐变 "图像"

inherit

指定背景图像应该从父元素继承

3 background-repeat 设置背景图像如何平铺

属性值

值

说明

repeat

背景图像将向垂直和水平方向重复。这是默认

repeat-x

只有水平位置会重复背景图像

repeat-y

只有垂直位置会重复背景图像

no-repeat

background-image不会重复

inherit

指定background-repea属性设置应该从父元素继承

4 background-position设置背景图像的定位

属性值

值

描述

left top left center left bottom right top right center right bottom center top center center center bottom

如果仅指定一个关键字，其他值将会是"center"

x% y%

第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％

xpos ypos

第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions

inherit

指定background-position属性设置应该从父元素继承

5 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

值

描述

scroll

背景图片随着页面的滚动而滚动，这是默认的。

fixed

背景图片不会随着页面的滚动而滚动。

local

背景图片会随着元素内容的滚动而滚动。

initial

设置该属性的默认值。 阅读关于 initial 内容

inherit

指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容