CSS3

CSS3 知识量：11 - 43 - 138

4.5 CSS3多背景><

什么是多背景- 4.5.1 -

CSS3允许在单一容器中使用多个背景图像，即可以在一个元素背景中使用复合图像。每一个图像都可以单独设置平铺方式、定位起点、尺寸大小等等属性，从而构建更加复杂的效果。

多背景的语法- 4.5.2 -

实现多背景的语法很简单，只需记住：每个背景属性之间使用逗号分隔，其他的与设置普通背景图像一样。例如：

background-image:url1,url2,url3;

需要注意的是：多背景也有层次之分，需按照浏览器显示时图像叠放的顺序从上往下指定，最先声明的背景图像位于最上层，以此类推。

多背景的示例- 4.5.3 -

下面是多背景的应用示例：

<!DOCTYPE html>
<html>
    <head>
        <title>背景</title>
        <meta charset="UTF-8">
        <style type="text/css">
            div{
                width: 280px;
                height: 220px;
                border: 1px solid #000;
                background: 
                    url(pic/1.jpg) no-repeat left top,
                    url(pic/2.jpg) no-repeat right top,
                    url(pic/3.jpg) no-repeat left bottom,
                    url(pic/4.jpg) no-repeat right bottom,
                    url(pic/background2.jpg) repeat center;
                margin-bottom: 40px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

显示的效果为：

微信截图_20210821221412.png

CSS3

1.简介

1.1 什么是CSS3

1.2 渐进增强

2.CSS3选择器

2.1 选择器简介

2.2 基本选择器

2.3 层次选择器

2.4 动态伪类选择器

2.5 目标伪类选择器

2.6 语言伪类选择器

2.7 UI元素状态伪类选择器

2.8 结构伪类选择器

2.9 否定伪类选择器

2.10 属性选择器

2.11 伪元素

3.CSS3边框

3.1 边框简介

3.2 边框颜色属性

3.3 图片边框属性

3.4 圆角边框属性

3.5 盒子阴影属性

4.CSS3背景

4.1 背景基本知识

4.2 背景原点属性

4.3 背景裁剪属性

4.4 背景尺寸属性

4.5 CSS3多背景

5.CSS3文本

5.1 CSS3文本简介

5.2 文本阴影

5.3 文本溢出

5.4 文本换行

6.CSS3颜色

6.1 网页色彩特性

6.2 CSS3透明属性

6.3 CSS3颜色模式

7.CSS3盒模型

7.1 盒模型简介

7.2 CSS3盒模型属性

7.3 更多盒模型属性

8.CSS3伸缩布局盒模型

8.1 Flexbox模型基础知识

8.2 Flexbox模型术语

8.3 Flexbox模型的应用

9.CSS3多列布局

9.1 多列布局简介

9.2 多列布局属性详解

10.响应式设计

10.1 媒体类型

10.2 媒体特性

10.3 响应式设计

11.嵌入Web字体

11.1 @font-face模块

11.2 应用@font-face

4.5 CSS3多背景><

什么是多背景- 4.5.1 -

多背景的语法- 4.5.2 -

多背景的示例- 4.5.3 -