背景 | 陈若的博客

背景

定义：用来设置网页背景的属性

background-color

定义：设置背景颜色

属性值

颜色单位

background-image

定义：用来单个元素设置一个或者多个背景图像，同时可以设置图片和背景颜色，这样背景颜色会形成图片的背景颜色

属性值

url(“图片的地址”)

问题

如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
如果背景的图片大于元素，将会一个部分背景无法完全显示
如果背景图片和元素一样大，则会直接正常显示

background-repeat

定义：用来设置背景的重复方式

属性值

repeat:默认值，背景会沿着x轴 y轴双方向重复
repeat-x:沿着x轴方向重复
repeat-y:沿着y轴方向重复
no-repeat:背景图片不重复

语法

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

background-position

定义：用来设置背景图片的位置

属性值

关键字 center，用来居中背景图片
关键字 top, left, bottom, right 中的一个。用来指定把这个项目（原文为 item）放在哪一个边缘。另一个维度被设置成 50%，所以这个项目（原文为 item）被放在指定边缘的中间位置
如果一个值是 top 或 bottom，那么另一个值不应该是 top 或 bottom
如果一个值是 left 或 right，那么另一个值不应该是 left 或 right
+50px（将图片的左边界对齐容器的中线）
0px（图片的左边界与容器左边界重合）
-100px（将图片相对容器左移100px，这意味着图片中部的100px内容将出现在容器中）
-200px（将图片相对容器左移200px，这意味着图片右部分的100px内容将出现在容器中）
-250px（将图片相对容器左移250px，这意味着图片的右边界对齐容器的中线）

background-clip

定义：用来设置背景的范围

属性值

border-box:默认值，背景会出现在边框的下边
padding-box:背景不会出现的边框，只出现在内容区和内边距
content-box:背景只会出现在内容区

background-origin

定义：用来设置背景图片的偏移量计算的原点

属性值

padding-box:默认值，background-position从内边距处开始计算
content-box:背景图片的偏移量从内容区处计算
border-box:背景图片的变量从边框处开始计算

background-size

定义：用来设置背景图片的大小

属性值

contain:图片比例不变，将图片在元素中完整显示
cover:图片比例不变，将元素铺满
值：第一个值表示宽度，第二个值表示高度，如果只写一个，则第二个值默认是auto
百分比:调整图片到指定大小。百分比是相对于包含元素的尺寸的

background-attachment

定义：用来设置背景图片跟随元素移动

属性值

scroll:默认值，背景图片会跟随元素移动
fixed:背景会固定在页面中，不会随元素移动
scroll:背景相对于元素本身固定，而不是随着它的内容滚动

语法

/* 关键 属性值 */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* 全局 属性值 */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

opacity

定义：指定了一个元素的不透明度，该属性指定了一个元素后面的背景的被覆盖程度

/* 完全不透明 */
opacity: 1;
opacity: 1.0;

/* 半透明 */
opacity: 0.6;

/* 完全透明 */
opacity: 0.0;
opacity: 0;

opacity: inherit;

cursor

定义：定义了鼠标指针放在一个元素边界范围内时所用的光标形状

属性	作用
url	需使用的自定义光标的 URL
default	默认光标（通常是一个箭头）
auto	默认，浏览器设置的光标
crosshair	光标呈现为十字线
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动
e-resize	此光标指示矩形框的边缘可被向右（东）移动
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）
n-resize	此光标指示矩形框的边缘可被向上（北）移动
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）
s-resize	此光标指示矩形框的边缘可被向下移动（南）
w-resize	此光标指示矩形框的边缘可被向左移动（西）
text	此光标指示文本
wait	此光标指示程序正忙（通常是一只表或沙漏）
help	此光标指示可用的帮助（通常是一个问号或一个气球）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: solid 3px #dfc;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

雪碧图

定义：将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

优点

①减少加载网页图片时对服务器的请求次数；

可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。

②提高页面的加载速度

sprite技术的其中一个好处是图片的加载时间(在有许多sprite时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。

缺点

①在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

②CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css

线性渐变

定义：颜色沿着一条直线发生变化

渐变

定义：可以让你在两个或多个指定的颜色之间显示平稳的过渡

线性渐变

linear-gradient()

定义：用来创建一个表示两种或多种颜色线性渐变的图片

线性渐变的开头，我们可以指定一个渐变的方向

to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈

渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况

/* 从上到下，蓝色渐变到红色 */
background-image:linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
background-image:linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
background-image:linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background-image:linear-gradient(0deg, blue, green 40%, red);

径向渐变

radial-gradient()

定义：将径向渐变设置为背景图像

属性	值	作用
shape	固定值	定义渐变的形状
	ellipse（默认）	指定椭圆形的径向渐变
	circle	指定圆形的径向渐变
size	可能值	定义渐变的尺寸
	farthest-corner (默认)	指定径向渐变的半径长度为从圆心到离圆心最远的角
	closest-side	指定径向渐变的半径长度为从圆心到离圆心最近的边
	closest-corner	指定径向渐变的半径长度为从圆心到离圆心最近的角
	farthest-side	指定径向渐变的半径长度为从圆心到离圆心最远的边
poition	可能值	定义渐变的位置。默认值是 “center”
	center（默认）	设置中间为径向渐变圆心的纵坐标值
	top	设置顶部为径向渐变圆心的纵坐标值
	bottom	设置底部为径向渐变圆心的纵坐标值
start-color, …, last-color		色标是您要在其间呈现平滑过渡的颜色。该值由一个颜色值组成，其后是一个可选的停止位置（0％到 100％之间的百分比值，或沿渐变轴的长度值），用于指定渐变的起止颜色

1
2
3

background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
background-image: radial-gradient(circle, red, yellow, green);