前端项目开发-12_CSS设置背景.pdf

CSS设置背景

王红元coderwhy

目录

1background-image

content

2background-repeat

3background-size

4background-position

5background-attachment

6background

coderwhy认识网页的背景

◼在开发中,为了让网页更加美观,我们经常会设置各种各样的背景:

我们前面已经学习了如何设置背景颜色,这里我们要学习设置背景的更多知识;

coderwhybackground-image

◼background-image用于设置元素的背景图片

会盖在(不是覆盖)background-color的上面

◼如果设置了多张图片

设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

◼注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

coderwhybackground-repeat

◼background-repeat用于设置背景图片是否要平铺

◼常见的设值有

repeat：平铺

no-repeat：不平铺

repeat-x：只在水平方向平铺

repeat-y：只在垂直平方向平铺

x=0

y=0

x

x=100

y=100

y

coderwhybackground-size

◼background-size用于设置背景图片的大小

auto：默认值,以背景图本身大小显示

cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见

contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比

percentage：百分比，相对于背景区（backgroundpositioningarea）

length：具体的大小，比如100px

coderwhybackground-position

◼background-position用于设置背景图片在水平、垂直方向上的具体位置

可以设置具体的数值比如20px30px;

水平方向还可以设值：left、center、right

垂直方向还可以设值：top、center、bottom

如果只设置了1个方向，另一个方向默认是center

coderwhybackground-attachment

◼background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

◼可以设置以下3个值

scroll：此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动

local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.

fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

coderwhybackground

◼background是一系列背景相关属性的简写属性

◼常用格式是

◼background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面

◼其他属性也都可以省略，而且顺序任意

cod