css动态背景库(CSS背景及应用)(1)

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

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

第二阶段 CSS308 CSS背景及应用

1 背景颜色图片及其平铺

背景颜色background

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

css动态背景库(CSS背景及应用)(2)

格式与用法如下:

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 魔兽背景图片

css动态背景库(CSS背景及应用)(3)

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

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的格式来写。

css动态背景库(CSS背景及应用)(4)

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

css动态背景库(CSS背景及应用)(5)

11 凹凸文字效果

css动态背景库(CSS背景及应用)(6)

css动态背景库(CSS背景及应用)(7)

12 王者荣耀导航栏(一)

css动态背景库(CSS背景及应用)(8)

css动态背景库(CSS背景及应用)(9)

13 王者荣耀导航栏(二)

文本的装饰

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

css动态背景库(CSS背景及应用)(10)

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

css动态背景库(CSS背景及应用)(11)

css动态背景库(CSS背景及应用)(12)

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

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

,