[CSS]CSS 的背景

请添加图片描述

前言

系列文章目录：
[目录]HTML CSS JS

根据视频和PPT整理
视频及对应资料：
HTML CSS
老师笔记： https://gitee.com/xiaoqiang001/html_css_material.git
视频：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程
视频对应资源
链接：【https://pan.baidu.com/s/1k1dpC6iGA93c6gVsUvPqYw】
提取码：1234
【GitHub 仓库链接】

文章目录

前言
1 背景颜色
2 背景图片
3 背景平铺
4 背景图片位置
4.1 方位名词
4.2 精确单位
4.3 混合单位

5 背景图像固定（背景附着）
6 背景复合写法
7 背景色半透明
8 背景总结

CSS 背景属性，可以给页面元素添加背景样式。可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1 背景颜色

background-color 属性定义了元素的背景颜色。

语法：
默认值为：transparent（透明）
颜色值可以为：颜色单词 | 十六进制 | rgb值 | rgba值

background-color: 颜色值;
1

<body>
  <div class="demo1">div>
  <div class="demo2">div>
  <div class="demo3">div>
  <div class="demo4">div>
  <div class="demo5">div>
body>
1
2
3
4
5
6
7

  <style>
    div {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px black solid
    }
    .demo1 {
      /* 默认值 */
      background-color: transparent;
    }
    .demo2 {
      /* 颜色单词 */
      background-color: red;
    }
    .demo3 {
      /* 十六进行 */
      background-color: #6666f3;
    }
    .demo4 {
      /* rgb值 */
      background-color: rgb(221, 85, 85);
    }
    .demo5 {
      /* rgba值  最后一个值为透明度 */
      background-color: rgba(245, 4, 4, 0.3);
    }
  style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2 背景图片

background-image 属性可以设置元素的背景图像。

语法：

background-image : none | url (url)
1

取值：

none：无背景图片
url(url)：背景图片的路径

背景图片后面的地址，千万不要忘记加 url()，同时里面的路径不要加引号。

<body>
  <div class="demo1">div>
  <div class="demo2">div>
  <div class="demo3">div>
body>
1
2
3
4
5

  <style>
    div {
      display: inline-block;
      width: 300px;
      height: 300px;
      border: 1px solid black;
    }

    .demo1 {
      background-image: none;
    }

    .demo2 {
      background-image: url(./pic.jpeg);
    }

    .demo3 {
      /* 在设置背景图片的同时可以设置背景颜色 */
      background-color: aqua;
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
    }
  style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3 背景平铺

在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

语法：

background-repeat: repeat | no-repeat | repeat-x | repeat-y
1

repeat：背景图片在纵向和横向上平铺(默认值)
no-repeat：背景图片在纵向和横向上都不平铺
repeat-x：背景图片在横向上平铺
repeat-y：背景图片在纵向上平铺

<body>
  <div class="demo1">div>
  <div class="demo2">div>
  <div class="demo3">div>
  <div class="demo4">div>
  <div class="demo5">div>
body>
1
2
3
4
5
6
7

  <style>
    div {
      display: inline-block;
      width: 400px;
      height: 200px;
      border: 1px solid black;
    }
    .demo1 {
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
    }
    .demo2 {
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
      background-repeat: repeat;
    }
    .demo3 {
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
      background-repeat: no-repeat;
    }
    .demo4 {
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
      background-repeat: repeat-x;
    }
    .demo5 {
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
      background-repeat: repeat-y;
    }

  style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

4 背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

语法：

background-position: x y;
1

x：横方向
y：纵方向

可以使用方位名词或者精确单位

x：left | center | right
y：top | center | bottom

4.1 方位名词

  <div class="demo1">div>
1

    div {
      display: inline-block;
      width: 400px;
      height: 200px;
      border: 1px solid black;
    }
    .demo1 {
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
      background-repeat: no-repeat;
      background-position: center center;
    }
1
2
3
4
5
6
7
8
9
10
11

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致，因为对于横向是left | center | right，对于纵向是top | center | bottom，可以根据单词区分出横向和纵向。

  <div class="demo2">div>
  <div class="demo3">div>
1
2

    .demo2 {
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
      background-repeat: no-repeat;
      background-position: left top;
    }
    .demo3 {
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
      background-repeat: no-repeat;
      background-position: top left;
    }
1
2
3
4
5
6
7
8
9
10

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
指定横向：

  <div class="demo4">div>
1

    .demo4 {
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
      background-repeat: no-repeat;
      background-position: left;
    }
1
2
3
4
5

指定纵向：

  <div class="demo4">div>
1

    .demo5 {
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
      background-repeat: no-repeat;
      background-position: bottom;
    }
1
2
3
4
5

4.2 精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

  <div class="demo1">div>
  <div class="demo2">div>
  <div class="demo3">div>
  <div class="demo4">div>
1
2
3
4

  <style>
    div {
      display: inline-block;
      width: 400px;
      height: 200px;
      border: 1px solid black;
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
      background-repeat: no-repeat;
    }
    .demo1 {
      background-position: 50px 20px;
    }
    .demo2 {
      background-position: 20px 50px;
    }
    .demo3 {
      background-position: 20px;
    }
    .demo4 {
      background-position: 50px;
    }
  style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4.3 混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

  <div class="demo1">div>
  <div class="demo2">div>
1
2

  <style>
    div {
      display: inline-block;
      width: 400px;
      height: 200px;
      border: 1px solid black;
      background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
      background-repeat: no-repeat;
    }
    .demo1 {
      background-position: 20px top;
    }
    .demo2 {
      background-position: right 30px;
    }
  style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5 背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

语法：

background-attachment : scroll | fixed
1

scroll 背景图片随内容滚动(默认)
fixed 背景固定

<body>
  <p>hellop>
  <p>hellop>
  <p>hellop>
  ...
body>
1
2
3
4
5
6

  <style>
    body {
      background-image: url(../bg2.jpg);
      background-repeat: no-repeat;
    }
  style>
1
2
3
4
5
6

  <style>
    body {
      background-image: url(../bg2.jpg);
      background-repeat: no-repeat;
      background-attachment: scroll;
    }
  style>
1
2
3
4
5
6
7

  <style>
    body {
      background-image: url(../bg2.jpg);
      background-repeat: no-repeat;
      background-attachment: fixed;
    }
  style>
1
2
3
4
5
6
7

6 背景复合写法

当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
1

<body>
  <p>hellop>
  <p>hellop>
  <p>hellop>
  ...
body>
1
2
3
4
5
6

  <style>
    body {
      background: yellowgreen url(../bg2.jpg) no-repeat scroll center top;
    }
  style>
1
2
3
4
5

7 背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。

语法：

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

最后一个参数是 alpha 透明度，取值范围在 0~1之间
我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3 新增属性，是 IE9+ 版本浏览器才支持的

<body>
  <div class="demo1">
    <h1>helloh1>
  div>
  <div class="demo2">
    <h1>helloh1>
  div>
  <div class="demo3">
    <h1>helloh1>
  div>
body>
1
2
3
4
5
6
7
8
9
10
11

  <style>
    body {
      background-image: url(../bg2.jpg);
    }
    div {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
    .demo2 {
      background-color: rgba(0, 0, 255, 0.3);
    }
    .demo3 {
      background-color: rgba(0, 0, 255, .3);
    }
  style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

8 背景总结

在这里插入图片描述
背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

相关阅读:
Java和JavaScript区别与联系
 VScode使用M5stack-c plus基于arduino-环境搭建
 项目开发的详细步骤（精华版）
Java进阶——IO流
 Android NFC开发详解：NFC读卡实例解析及总结
 论如何自研电动车控制器
 Vscode MacOS版本下载及html配置
 记一次内网靶机实战
 研究mysql日志的使用
 LeetCode【100】单词拆分
原文地址：https://blog.csdn.net/m0_53022813/article/details/126860377