css动态背景库（CSS背景及应用）

哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！​

第二阶段 CSS308 CSS背景及应用

1 背景颜色图片及其平铺

背景颜色background

CSS可以添加背景颜色和背景图片，以及来进行图片设置。

格式与用法如下：

div {

width: 500px;

height: 500px;

background-color: pink;

background-image: url(images/l.jpg);

background-repeat: no-repeat;

}

sublime小技巧：“bgc tab”=background-color

其他的以此类推

2 背景位置（一）

背景位置position

语法：

background-position: length length;

background-position: position position;

background-position: left top;/*默认的是在左上角*/

background-position: bottom right;/*方位名词没有顺序，谁都在前都可以*/

background-position: left;/*如果方位名词只写一个，另一个默认为center*/

参数：

length：百分数丨由浮点数字和单位标识符组成的长度值。请参阅长度单位position:top center bottom left right

3 背景位置（二）

精确单位：

background-position: 10px 30px;

/*第一个值一定是x坐标 第二个值一定是y坐标*/

background-position: 10 center;

/*混搭*/

4 魔兽背景图片

想让图片往上移，可以是负数值

background-image: url(images/ms.jpg);

background-position: center -25px;

实际上用的最多的就是居中对齐

5 背景附着图

语法：

background-attachment: scroll、 fixed;

参数：

scroll：背景图像是随对象内容滚动

fixed：背景图像固定

说明：

设置或检索背景图像是随对象内容滚动还是固定的。

6 背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background背景颜色-背景图片地址-背景平铺-背景滚动-背景位置background:transparent url（image jpg） repeat-y scroll 50%0：

background: #000 url(images/lol.jpg) no-repeat fixed center 100px;

黑色 图片地址 不平铺 水平居中 垂直100像素

后面的两个位置值是不能分开的

7 背景半透明

CSS3支持背景半透明的写法语法格式是

background: rgba(0, 0, 0, 0.7);

最后一个参数是 alpha透明度取值范围0-1之间

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

同样，可以给文字和边框透明都是rgba的格式来写。

8 背景缩放（一）

通过 background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a）可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）

background-size:50% ;

背景图片设置为原来的50%大小

9 背景缩放（二）

b）设置为 cover时，会自动调整缩放比例，保证图片始终填充满背景区堿，如有溢出部分则会被隐藏。

C）设置为 contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

10 多背影图片

以逗号分隔可以设置多背景，可用于自适应布局做法就是用逗号隔开就好了。

1 一个元素可以设置多重背景图像。

2 每组属性间使用逗号分隔。

3 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。

4 为了避免背景色将图像盖住，背景色通常都定义在最后一组上

div {

height: 300px height:300px;

background: url(images/l.jpg) no-repeat left top,

url(images/3.jpg) no-repeat right bottom hotpink

11 凹凸文字效果

12 王者荣耀导航栏（一）

13 王者荣耀导航栏（二）

文本的装饰

text-decoration通常我们用于给链接修改装饰效果

使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

本章已结束，下篇文章将分享《09 CSS三大特性》小伙伴们不要错过哟！

,