前端CSS学习-Background背景相关

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

background主要设置一下五个属性:

background-color // 设置元素的背景颜色。
background-image // 把图像设置为背景。
background-repeat // 设置背景图像是否及如何重复。
background-attachment // 背景图像是否固定或者随着页面的其余部分滚动。
background-position // 设置背景图像的起始位置。

1. background-color // 背景颜色

这个属性定义了元素的背景颜色, 它有三种定义方式:

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

给文本设置background-color可以实现文本高亮效果.

2. background-image // 背景图像

这个属性定义了元素的背景图像, 使用方法

绝对路径写法：
background-image:url("/img/3.jpg");
或者:
background-image:url(/img/3.jpg);
相对路径写法：
background-image:url(“../img/3.jpg”);
或者:
background-image:url(../img/3.jpg);

当然也可以设置多个图片, 注意要用逗号来分隔: 比如

background-image:url('res/1.jpg'),url('res/2.jpg');

1.jpg会默认显示在2.jpg的上方

3. background-repeat // 设置图像如何平铺

默认的情况下, image的渲染方式是在页面的水平或者垂直方向平铺, 但是有时候这样会显得不协调, 这个时候就需要来通过设置

background-repeat 来设置背景图像的平铺方式.

我们可以这样设置.

 1 background-repeat:repeat-x; // 在x轴的方向上平铺
 2 
 3 background-repeat:repeat-y; // 在y轴发方向上平铺
 4 
 5 background-repeat:repeat-x repeat-y; // 在x 和 y 轴方向上平铺
 6 
 7 background-repeat:space; // 均匀的平铺背景图片，不会被裁剪 不会拉伸图片
 8 
 9 background-repeat:round; // 水平和垂直平铺背景图片，拉伸图片以尽可能的填充背景，不会被裁剪 
10 
11 background-repeat:no-repeat; // 不进行平铺

4. background-position // 设置图像位置

图像默认显示的位置是top left即左上角, 这样满足不了我们设计的预期, 这时就需要来设置 background-position属性来设置图像的初始位置了.

怎么使用就是 top right left bottom center 这样来组合设置, 如果只设置了某一个属性那么其它的默认是center.

这个属性还有两种设置方式:

1) 通过%来设置

background-position: 20% 30%; // 距离视图左边20%, 上面30%;

如果只是设置了一个比如:

bcakground-position: 20%;

那么就是距离左边20%; 而在水平方向上默认为居中显示.

2)通过px来设置

background-position: 200px 300px; // 距离视图左边界200个像素单位, 距离视图上边界300个像素单位

如果只是设置了一个比如:

bcakground-position: 200px;

那么就是距离左边200个像素单位; 而在水平方向上默认为居中显示.

当然也可以这样来设置:

1 background-position:left 10px bottom 20px; // 背景图片水平方向与左边缘相距10px，垂直方向与底部边缘相距20px

5. background-attachment // 设置图像是否随着页面滚动.

background-attachment: scroll  // 背景图片随页面的其余部分滚动 默认设置
background-attachment:fixed  // 背景图像是固定的
background-attachment:inherit  // 指定background-attachment的设置应该从父元素继承

6. background-size ：设置背景图片的大小

默认值 auto auto // 背景图片的原始大小

示例:

1 background-size:100px; // 宽度为100px 高度为原始大小
2 background-size:100px 200px; // 宽度为100px 高度为200px
3 background-size:100px 50%; // 宽度为100px 高度为页面大小的50%
4 background-size:100% 100%; // 宽和高均为100% 占满整个视图