css背景

Posted 2021-06-18 至安

前言

通过 CSS 背景属性，可以给页面元素添加背景样式。背景属性可以设置

• 背景颜色：background-color
• 背景图片：background-image
• 背景平铺：background-repeat
• 背景图片位置：background-position
• 背景图像固定：background-attachment

背景颜色

background-color 属性定义了元素的背景颜色。

background-color:颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色

背景图片

background-image 属性设置元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超

大的背景图片，优点是非常便于控制位置 (精灵图也是一种运用场景)

 background-image: url();

注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。

属性

值	说明
url(\'URL\')	图像的URL
none	无图像背景会显示。这是默认
linear-gradient()	创建一个线性渐变的 "图像"(从上到下)
radial-gradient()	用径向渐变创建 "图像"。 (center to edges)
repeating-linear-gradient()	创建重复的线性渐变 "图像"。
repeating-radial-gradient()	创建重复的径向渐变 "图像"
inherit	指定背景图像应该从父元素继承

背景平铺

如果需要在 html 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

body {
	background-image:url(\'paper.gif\');
	background-repeat:repeat-y;
}

属性

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	指定background-repea属性设置应该从父元素继承

背景图片位置

通过 CSS 背景属性 background-position，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

参数是方位名词

• 水平：left center right
• 垂直：top center bottom

注意：

• 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
• 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

参数是像素单位

background-position: 20px 50px;

• 盒子左上角为坐标原点

• 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

• 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

参数是比例单位

background-position: x% y%;

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