css系列-背景色、背景图片

背景颜色

背景颜色可以使用 关键字|rgb|rgba|十六进制 等颜色格式

<style>
  h2 {
	background-color: red;
  }
</style>
...

<h2>背景色</h2>

背景图片

可以使用 png| gif |jpeg 等图片做为背景使用

这里特别说明：背景图片是没有空间位的，即元素不会因为背景图片而撑开，若给一个元素添加背景，不给元素宽高，那么背景图片也不会显示。

background-image: url(icon.jpg);

背景裁切

选项	说明
border-box	包括边框
padding-box	不含边框，包括内边距
content-box	内容区域

background-clip: border-box;

背景重复

用于设置背景重复的规则

选项	说明
repeat	水平、垂直重复
repeat-x	水平重复
repeat-y	垂直重复
no-repeat	不重复
space	背景图片对称均匀分布

background-repeat: repeat-y

背景滚动

用于设置在页面滚动时的图片处理方式

选项	说明
scroll	背景滚动
fixed	背景固定

background-attachment: fixed;

背景位置

用于设置背景图片的水平、垂直定位。（这是重点，精灵图（雪碧图）的原理就是借助backgroun-position定位每个小图标）

选项	说明
left	左对齐
right	右对齐
center	居中对齐
top	顶端对齐
bottom	底部对齐

居中对齐

background-position: center;
或
background-position: 50% 50%;

水平居右，垂直居中

background-position: right center;
或
background-position: 100% 50%;

使用具体数值定义

background-position: 100px 100px;
也支持使用负值
background-position: -200px 100px;

背景尺寸

选项	说明
cover	背景完全覆盖不会变形，但可能会有背景溢出
contain	图片不溢出完全显示，但可能会有空白区域

指定数值定义宽高尺寸

background-size: 50% 100%;
或
background-size: 200px 200px;

宽度固定高度自动

background-size: 50% auto;

多个背景

后定义的背景置于底层

background-image: url(xj-small.png), url(bg.png);

多属性定义：可以定义每个背景图片显示方式，也可统一指定。

background-image: url(xj-small.png), url(bg.png);
background-repeat: no-repeat;
background-position: top left, right bottom;

可以一次定义多个背景图片。

background: url(xj-small.png) left 50% no-repeat,
                url(bg.png) right 100% no-repeat red;

组合设置

可以使用一条指令设置背景

background: red url(xj-small.png) no-repeat right 50% fixed;

盒子阴影

可以使用 box-shadow 对盒子元素设置阴影，参数为 水平偏移,垂直偏移,模糊度,颜色 构成。

box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);

颜色渐变

线性渐变

渐变一般用在背景颜色中使用，线性渐变默认从上到下

background: linear-gradient(red, green);

渐变角度

background: linear-gradient(30deg, red, green);

向右渐变

background: linear-gradient(to right, red, green)

向左渐变

background: linear-gradient(to left, red, green);

左上渐变

background: linear-gradient(to top left, red, green);

右下渐变

background: linear-gradient(to right bottom, red, green);

设置多个颜色

background: linear-gradient(red, rgb(0, 0, 200), green, rgba(122, 211, 100, 0));

径向渐变

设置渐变

background: radial-gradient(red, blue, green);

设置渐变宽度与高度（只是设置渐变的宽高，背景是没有宽高的）

未设置渐变宽高：         设置渐变宽高：

background: radial-gradient(100px 200px, red, blue, green);

左下渐变

background: radial-gradient(at bottom left, red, blue);

右下渐变

background: radial-gradient(at bottom right, red, blue);

左侧向中心渐变

background: radial-gradient(at center left, red, blue);

底部向中心渐变

background: radial-gradient(at 50% 100%, red, blue);

标识位

即发生渐变的位置，渐变的区域，颜色未指定标识时，颜色会平均分布。

红色与蓝色在50%gc 60%间发生渐变.

background: linear-gradient(90deg, red 50%, blue 60%);

标识位相同时将没有过渡效果

background: linear-gradient(45deg, red 0,red 50%, blue 50%);

径向标识位绘制小太阳

width: 150px;
height: 150px;
background: radial-gradient(red 0, yellow 30%, black 60%, black 100%);

中间阀值

即发生渐变区域中间的位置

通过在两个颜色间中间点定义过渡位置

background: linear-gradient(45deg, red, 50%, blue);

###渐变重复

下例定义从0到25为蓝色,25px到50px的红色，并进行重复后产生渐变的进度条。

background: repeating-linear-gradient(90deg, blue, 25px, yellow 25px, 25px, red 50px);

径向重复

width: 200px;
height: 200px;
background: repeating-radial-gradient(100px 100px, red 0%, yellow 40%);