CSS学习笔记(一)-8.背景

一、背景色

默认元素都有背景色，只不过背景色是透明。

background-color: transparent;

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-12 17:45:48
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-12 17:47:05
 7  * @Description: 
 8  * @FilePath: \css\背景.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>背景-背景色</title>
18     <style>
19         .div1 {
20             background-color: transparent;
21         }
22     </style>
23 </head>
24 
25 <body>
26     <div class='div1'></div>
27     <div></div>
28 </body>
29 
30 </html>
View Code

 

二、背景图片

使用场景:1.logo,2.装饰图片 3.超大背景图片

有点：方便控制位置。

语法:background-image: url(bd.png)

默认展示：平铺

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-12 17:45:48
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-12 18:07:47
 7  * @Description: 
 8  * @FilePath: \css\背景.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>背景-背景图片</title>
18     <style>
19         .div1 {
20             height: 1000px;
21             width: 1000px;
22             background-image: url(bd.png)
23         }
24     </style>
25 </head>
26 
27 <body>
28     <div class='div1'></div>
29     <div></div>
30 </body>
31 
32 </html>
View Code

 

 

1.不平铺

background-repeat: no-repeat;

2.平铺：

background-repeat: repeat;

3.沿X轴平铺：

background-repeat: repeat-x;

4.沿y轴平铺：

background-repeat:repeat-y;

5.背景颜色和背景图片都存在时，背景图片在背景颜色之上。

 

6.背景图片的位置：

6.1 方位名词

backgroud-postion:center top;

可选项：top center right left bottom;

6.2 精确定位：

background-position: 20px 30px;

 

6.3 混合单位：(第一个必须是x轴，第二个必须是Y轴)

background-position: left  30px;

 

7.背景图片固定或则滚动：

background-attachment: scroll / fixed;

 

8.背景简写：

background:颜色，图片地址，平铺，图像滚动，位置

background: orange url(bd.png) no-repeat fixed center top;

 

9.背景色半透明：

background: rgba(0,0,0,0.3)

或：

background: rgba(0,0,0,.3)

 

 

posted @ 2021-07-12 18:37  kaer_invoker  阅读(52)  评论(0)    收藏  举报