菜单 搜索
首页 前端知识 【CSS 背景详解】background

【CSS 背景详解】background

2024-06-14 23:06:44 前端知识 前端哥 201 864 我要收藏

背景 background

基础

背景颜色 background-color

background-color 设置元素的背景颜色。属性的值为颜色值或关键字"transparent"二者选其一。

CSS的color数据类型 https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value

背景图片 background-image

background-image 用于设置元素的背景图片。

❤️‍🔥 语法
每个背景图像被明确规定为关键字 none 或是一个 <image> 值。

CSS的image数据类型 https://developer.mozilla.org/zh-CN/docs/Web/CSS/image

  • 会盖在 background-color的上面

  • 如果设置了多张图片

    • 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

  • 如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

    
      <style>
            .box {
                width: 600px;
                height: 400px;

                background-color: aquamarine;
                background-image: url(../images/bg2.jpeg), url(../images/bg1.jpeg);
                background-repeat: no-repeat;
            }

            .box1 {
                width: 600px;
                height: 400px;

                background-image: url(../images/bg2.jpeg), linear-gradient(yellow, blue);
                background-repeat: no-repeat;
            }
      </style>
      <div class="box"></div>
      <div class="box1"></div>

在这里插入图片描述

background-repeat

background-repeat 用于设置背景的重复方式。

  • ❤️‍🔥 单值语法

background-repeat: repeat | no-repeat | repeat-x | repeat-y | space | round

  ```css

    .box2 {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        background-image: url(/images/star.png);
    }

    .bg-repeat {
        background-repeat: repeat;
    }

    .bg-no-repeat {
        background-repeat: no-repeat;
    }

    .bg-repeat-x {
        background-repeat: repeat-x;
    }

    .bg-repeat-y {
        background-repeat: repeat-y;
    }

    .bg-repeat-space {
        background-repeat: space;
    }

    .bg-repeat-round {
        background-repeat: round;
    }

    .bg-repeat2 {
        background-repeat: no-repeat repeat;
    }

  ```

  ```html
      <!-- background-repeat -->
  <div class="repeat">
      <div class="box2"></div>

      <div class="box2 bg-repeat"></div>
      <div class="box2 bg-no-repeat"></div>
      <div class="box2 bg-repeat-x"></div>
      <div class="box2 bg-repeat-y"></div>
      <div class="box2 bg-repeat-space"></div>
      <div class="box2 bg-repeat-round"></div>
  </div>
  ```

  • ❤️‍🔥 双值语法 ： 水平 horizontal | 垂直 vertical

        .bg-repeat2 {
        background-repeat: repeat repeat;
    }

    .bg-no-repeat2 {
        background-repeat: no-repeat no-repeat;
    }

    .bg-repeat-x2 {
        background-repeat: repeat no-repeat;
    }

    .bg-repeat-y2 {
        background-repeat: no-repeat repeat;
    }

    .bg-repeat-space2 {
        background-repeat: space no-repeat;
    }

    .bg-repeat-round2 {
        background-repeat: round space;
    }

    
    <!-- background-repeat 双值 双值语法：水平 horizontal | 垂直 vertical -->
  <div class="repeat">
      <div class="box2 bg-repeat2"></div>
      <div class="box2 bg-no-repeat2"></div>
      <div class="box2 bg-repeat-x2"></div>
      <div class="box2 bg-repeat-y2"></div>
      <div class="box2 bg-repeat-space2"></div>
      <div class="box2 bg-repeat-round2"></div>
  </div>

background-origin

background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域。

background-origin:padding-box | content-box | border-box

  • padding-box : 初始值，背景图片的摆放以 padding 区域为参考

  • content-box : 背景图片的摆放以 content 区域为参考

  • border-box : 背景图片的摆放以 border 区域为参考

            .bg-origin {
          display: flex;
          align-items: center;
          justify-content: space-around;
      }

      .origin {
          width: 200px;
          height: 200px;
          border: 3px dotted #000;
          padding: 10px;

          background-image: url(/images/bg1.jpeg);
          background-repeat: no-repeat;
          background-size: cover;
      }

      .origin-cr {
          background-image: linear-gradient(yellow, green);
      }

      .origin-content {
          background-origin: content-box;
      }

      .origin-padding {
          background-origin: padding-box;
      }

      .origin-border {
          background-origin: border-box;
      }

        <!-- background-origin -->
  background-origin
  <div class="bg-origin">
      <div class="origin ">
          默认值：padding-box
      </div>
      <div class="origin origin-content">
          background-origin: content-box;
      </div>
      <div class="origin origin-padding">
          background-origin: padding-box;
      </div>
      <div class="origin origin-border">
          background-origin: border-box;
      </div>
  </div>
  background-image为渐变色
  <div class="bg-origin">
      <div class="origin origin-cr">
          默认值：padding-box
      </div>
      <div class="origin origin-cr origin-content">
          background-origin: content-box;
      </div>
      <div class="origin origin-cr origin-padding">
          background-origin: padding-box;
      </div>
      <div class="origin origin-cr origin-border">
          background-origin: border-box;
      </div>
  </div>

background-size

background-size 设置背景图片的大小

图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

  • auto:默认值, 以背景图本身大小显示

  • cover:缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见

  • contain:缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比

  • <percentage>:百分比，相对于背景区(background positioning area)

  • length:具体的大小，比如100px

        .size {
        height: inherit;
        background-color: bisque;
        /* background-image: url(/images/bg2.jpeg); */
        background-image: linear-gradient(yellow, green);
        background-repeat: no-repeat;
    }

    .size-cover {
        background-size: cover;
    }

    .size-contain {
        background-size: contain;
    }

    .size-auto {
        background-size: auto;
    }

    .size-per {
        background-size: 50% 50%;
    }

    .size-length {
        background-size: 32px 32px;
    }
    .size-mix {
        background-image: linear-gradient(yellow, green), url(/images/bg2.jpeg), linear-gradient(red, blue);
        background-size: 6px, contain, auto;
    }

        <div class="bg-size">
    background-size

    <div class="size size-cover">background-size: cover;</div>
    <div class="size size-contain">background-size: contain;</div>
    <div class="size size-auto">background-size: auto;</div>
    <div class="size size-per">background-size: 50% 50%;</div>
    <div class="size size-length">background-size: 32px 32px;</div>
    <div class="size size-mix ">
        background-image: linear-gradient(yellow, green), url(/images/bg2.jpeg), linear-gradient(red, blue);
        background-size: 6px, contain, auto;
    </div>
  </div>

background-position

background-position 为每一个背景图片设置初始位置，这个位置是相对于由 background-origin定义的位置图层的。设置背景图片在水平、垂直方向上的具体位置。

  • 属性值 : 可以使用一到四个值进行定义。

    • 如果使用两个非关键字值，第一个值表示水平位置，第二个值表示垂直位置。
    • 如果仅指定一个值，则第二个值默认是 center。
    • 如果使用三个或四个值，则长度百分比值是前面关键字值的偏移量

  • 一个值:

    • 关键字: center、 left 、 right、 bottom、 top
    • 具体值或者百分比：指定相对于左边界的 x 坐标，y 坐标被设置成 50%。
    • 只设置了1个方向，另一个方向默认是center

  • 两个值 ：一个定义 x 坐标，另一个定义 y 坐标

    • 关键字： left 、 right、 bottom、 top

    • 值或者百分比: 10px 10%

    • 例如：top top 和 left right 是无效的。

    • 默认值是 left top 或者0% 0%。

    • 排序

      • 配对关键字时，位置并不重要，因为浏览器可以重新排序。

        • 写成 top left 或 left top 其产生的效果是相同的。

      • <length> 或 <percentage> :

        • 如果另一个值是 left 或 right，则该值定义相对于顶部边界的 Y。
        • 如果另一个值是 top 或 bottom，则该值定义相对于左边界的 X。
        • 如果两个值都是 <length> 或 <percentage> 值，则第一个定义 X，第二个定义 Y。

      • 使用 <length> 或 <percentage> 与关键字配对时顺序非常重要，定义 X 的值放在前面，然后是定义 Y 的值，right 20px 和 20px right 的效果是不相同的，前者有效但后者无效。

  • 三个值： 两个值是关键字值，第三个是前面值的偏移量

    • 第一个值是关键字top、left、bottom、right，或者 center
      • 如果设置为 left 或 right，则定义了 X。
      • 如果设置为 top 或 bottom，则定义了 Y，另一个关键字值定义了 X。
    • <length> 或 <percentage>:
      • 如果是第二个值，则是第一个值的偏移量。
      • 如果是第三个值，则是第二个值的偏移量。
    • 单个长度或百分比值是其前面的关键字值的偏移量。一个关键字与两个 <length> 或 <percentage> 值的组合无效。

  • 四个值： 第一个和第三个值是定义 X 和 Y 的关键字值，第二个和第四个值是前面 X 和 Y 关键字值的偏移量

    • 第一个值和第三个值是关键字值 top、left、bottom、 right 之一。
      • 如果设置为 left 或 right，则定义了 X。
      • 如果设置为 top 或 bottom，则定义了 Y，另一个关键字值定义了 X。
    • 第二个和第四个值是 <length>或 <percentage>。
      • 第二个值是第一个关键字的偏移量。
      • 第四个值是第二个关键字的偏移量。
    <style>
            .box3 {

            width: 200px;
            height: 200px;
            background-color: aquamarine;
            background-image: url(/images/star.png), url(/images/moon.png), linear-gradient(yellow, blue);
            background-repeat: no-repeat;
        }

        .bg-position {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .position1 {
            background-position: right, left;
        }

        .position2 {
            background-position: right 70%, left bottom;
        }

        .position3 {
            /* background-position: right 20px, 20px right; */
            background-position: right 20px, 20px bottom, center;
        }

        .position4 {
            background-position: right top 10px, left bottom 10%, center;
        }

        .position5 {
            background-position: right 10px top, left 10% bottom, center;
        }

        .position6 {
            background-position: right 10px top 20px, left 10% bottom 50%, center;
        }
    </style>
    ...
    <div class="bg-position">
        <div class="box3 position1">background-position：一个值</div>
        <div class="box3 position2">background-position：两个值</div>
        <div class="box3 position3">background-position：两个值</div>
        <div class="box3 position4">background-position：三个值</div>
        <div class="box3 position5">background-position：三个值</div>
        <div class="box3 position6">background-position：四个值</div>
    </div>

background-attachment

background-attachment 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

  • scroll:此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动
  • local:此关键属性值表示背景相对于元素的内容固定。
    • 如果一个元素拥有滚动机制，背景将会随着元素的内容滚动
  • fixed:此关键属性值表示背景相对于视口固定
    • 即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
  ...
      <style>
        .bg-attachment {
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color: aqua;

        }

        .box4 {
            width: 300px;
            height: 200px;
            background-image: url(/images/moon.png), url(/images/bg1.jpeg), linear-gradient(#F2C94C, #fff);
            background-repeat: no-repeat;
            background-position: center, bottom left, center;
            background-size: auto, cover, contain;
            overflow-y: scroll;
        }

        .attachment-scroll {
            background-attachment: scroll;
        }

        .attachment-local {
            background-attachment: scroll, local;
        }

        .attachment-fixed {
            background-attachment: scroll, scroll, fixed;
        }

      </style>
  ...

      <div class="bg-attachment">
        <div class="box4 attachment-scroll">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
        </div>
        <div class="box4 attachment-local">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
        </div>
        <div class="box4 attachment-fixed">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dolores mollitia a modi adipisci sit
            necessitatibus. Quas, ad at laborum a, inventore obcaecati dolorem eligendi eos culpa aliquid et voluptas?
        </div>
    </div>

background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

  • border-box :背景延伸至边框外沿（但是在边框下层）。

  • padding-box : 背景延伸至内边距（padding）外沿。不会绘制到边框处。

  • content-box :背景被裁剪至内容区（content box）外沿。

  • text : 背景被裁剪成文字的前景色。

        .bg-clip {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .box5 {
            width: 200px;
            height: 150px;
            padding: 20px;
            border: 3px dotted darkblue;
            background-color: #F2C94C;
            background-image: url(/images/bg1.jpeg);
            background-size: cover;
            /* background-repeat: no-repeat; */
        }

        .clip-bg {
            background-image: linear-gradient(45deg, #1E9600, #FFF200, #FF0000, #1E9600, #FFF200, #FF0000);
        }

        .clip-border {
            background-clip: border-box;
        }

        .clip-padding {
            background-clip: padding-box;
        }

        .clip-content {
            background-clip: content-box;
        }

        .clip-text {
            font: 900 1.2em sans-serif;
            text-decoration: underline;
            background-clip: text;
            -webkit-background-clip: text;
            color: rgba(0, 0, 0, 0.1);
        }

<!--background-clip -->
    background-clip
    <div class="bg-clip">
        <div class="box5">background-clip</div>
        <div class="box5 clip-border">background-clip: border-box;</div>
        <div class="box5 clip-padding">background-clip: padding-box;</div>
        <div class="box5 clip-content">background-clip: content-box;</div>
        <div class="box5 clip-text">background-clip: text;</div>
    </div>
    <div class="bg-clip">
        <div class="box5 clip-bg">background-clip:border-box 默认值</div>
        <div class="box5 clip-bg clip-border">background-clip: border-box;</div>
        <div class="box5 clip-bg clip-padding">background-clip: padding-box;</div>
        <div class="box5 clip-bg clip-content">background-clip: content-box;</div>
        <div class="box5 clip-bg clip-text">background-clip: text;</div>
    </div>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/12184.html
标签
tensorflow
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

使用compile_commands.json配置includePath环境，解决vscode中引入头文件处有波浪线的问题

2024-06-20 09:06:55

一文详解 requests 库中 json 参数和 data 参数的用法

2024-06-20 09:06:18

fastjson升级为fastjson2

2024-06-20 09:06:18

protobuf对象与JSON相互转换

2024-06-20 09:06:14

JSON.toJSONString() 输出 “$ref“:“$[0]“问题解决及原因分析

2024-06-20 09:06:11

如何打开并且配置vscode的setting.json文件

2024-06-20 09:06:08

NVM 及 PNPM 安装

2024-06-20 09:06:01

npm有哪些插件包？？

2024-06-20 09:06:01

Component is not found in path “miniprogram_npm/@vant/

2024-06-20 09:06:59

安装nodejs报错：npm error code CERT_HAS_EXPIRED npm error errno CERT_HAS_EXPIRED certificate has expired

2024-06-20 09:06:58

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！