css中background的学习与总结

background

background-attachment

scroll

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

• 默认值，会跟随页面一起滚动；
• 注意，如果设置了overflow：hidden；则不会跟随页面滚动；

fixed

.bg-attachment-fixed {
  background-attachment: fixed;
}

• 相对于视口固定，与元素没有关系了；

local

.bg-attachment-local {
  background-attachment: local;
}

• 背景图相对于元素内容固定，元素滚动，内容也滚动

设置多背景

body {
  background-image: url("img1.png"), url("img2.png");
  background-attachment: scroll, fixed;
}

background-blend-mode（混合模式）

• background-blend-mode: normal;
• background-blend-mode: multiply;
• background-blend-mode: hard-light;
• background-blend-mode: difference;

demo

.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
  }

background-clip

background-clip: border-box;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZXcsC66Z-1666071995500)(en-resource://database/684:1)]

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

• 背景包含边框

background-clip: padding-box;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z5YtHtLv-1666071995501)(en-resource://database/686:1)]

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

• 背景不包含边框，从边框向里延伸

background-clip: content-box;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Imu4Kzsc-1666071995501)(en-resource://database/688:1)]

• 背景相对于内容定位

background-origin

• 背景的原点：从边框开始、边框内或填充内容

background-origin: padding-box;（默认）

.bg-origin-padding {
  background-origin: padding-box;
  background-repeat: no-repeat;
  /* 默认 */
}

• 背景从padding内容开始覆盖，包含padding

background-origin: border-box;

.bg-origin-border {
  background-origin: border-box;
  background-repeat: no-repeat;
}

• 背景从边框开始覆盖，包含边框

background-origin: content-box;

.bg-origin-content {
  background-origin: content-box;
  background-repeat: no-repeat;
}

• 背景从内容开始覆盖

background-position

一个值

• background-position: top;指定边，另一边居中
• background-position: bottom;指定边，另一边居中
• background-position: left;指定边，另一边居中
• background-position: right;指定边，另一边居中
• background-position: center;居中

两个值（一个定义 x 坐标，另一个定义 y 坐标）

百分比

• background-position: 25% 75%;

数值

• background-position: 0 0;
• background-position: 1cm 2cm;
• background-position: 10ch 8em;

三个值

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

value

• background-position: 0 0, center;

四个值

• 第一个值和第三个值是关键字值 top、left、bottom、 right 之一。
• 第二个和第四个值是 <数值> 或 <百分比>。
• 第二个是第一个的偏移量，第四个是第三个偏移量。

百分比

基本上发生的情况是从相应的容器尺寸中减去背景图像尺寸，然后将结果值的百分比用作从左（或顶部）边界的直接偏移量。

(container width - image width) * (position x%) = (x offset value)

background-repeat

value（单值）

• background-repeat: repeat-x;
• background-repeat: repeat-y
• ;background-repeat: repeat;
• background-repeat: space;
• background-repeat: round;
• background-repeat: no-repeat;

value（双值）

• background-repeat: repeat space;
• background-repeat: repeat repeat；
• background-repeat: round space;
• background-repeat: no-repeat round;

background-size

value

• background-size: cover；

• background-size: contain；

• 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto background-size: 50%
  background-size: 3em
  background-size: 12px
  background-size: auto

两个值, 第一个值指定图片的宽度，第二个值指定图片的高度 */background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

逗号分隔的多个值：设置多重背景
background-size: auto, auto 不同于 background-size: auto auto
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain