【CSS 背景详解】background

背景 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 用于设置背景的重复方式。

❤️‍🔥 单值语法

  ```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>