全栈之前端 | 9.CSS3基础知识之图像元素样式学习

全栈工程师修炼指南

发布于 2023-12-18 17:24:35

1350

发布于 2023-12-18 17:24:35

0x00 前言简述

描述: 好久没更新此《#前端学习之路》专栏文章了，不知道学习前端看友们想不想我，所以这一段时间又开始整理更新了。通过前面几章的学习，相信大家已经对CSS有了一个简单的了解吧，现在我们又回到使用频率较高的 文本 text、图像 images、媒体 media、表单 table 等元素CSS样式的设置，此章节主要讲解针对图像的相关CSS属性以其使用的示例演示。

通过本章将学习如下图像相关属性，您可以改变图像、媒体的样式等。

width/height 属性: 调整图像宽高大小（前面已介绍，此处不在累述）。 max-width/max-height 属性：调整图像最大宽高大小（前面已介绍，此处不在累述）。 object-fit 属性: 指定可替换元素（例如：<img> 或 <video>）的内容应该如何适应到其使用高度和宽度确定的框。 object-position 属性: 指定被替换元素的内容对象在元素框内的对齐方式。 background-image 属性: 为一个元素设置单个或多个背景图像 background-repeat 属性: 设置背景图像重复方式 background-size 属性: 设置背景图像大小 background-clip 属性: 设置背景图像延伸 background-position属性: 设置背景图像初始位置 background-origin 属性: 设置背景图像相对区域 background-attachment 属性: 设置背景图像是固定还是滚动 background-blend-mode 属性: 设置背景图像与背景色如何混合 clip-path 属性 : 以裁剪方式截取元素和图像。

0x01 图像样式属性介绍

如何处理图像溢出问题呢？

描述: 前面我们说过 CSS 中万物皆盒。如果你把一张图片放在一个盒子里，而这张图片的原始长和宽比盒子的小或大，那么这张图要么缩在盒子里，要么就从盒子里面溢出，此时便需要我们使用width/height、max-width/max-height、object-fit 属性来指定如何处理这些溢出。

使用 max-width/max-height 解决图像溢出盒子

例如：下述有两个盒子长宽均为 200 像素，尝试在示例中的 <img> 元素加入 max-width: 100%，你会看到，左边那张小的图像没有变化，而大的图像变小了，恰好装在了盒子里。

<style>
.box {
  width: 300px;
}
img {
  max-width: 100%;
  max-height: 100%;
}
</style>
<div class="wrapper">
  <div class="box"><img src="star.png" alt="star"></div>
  <div class="box"><img src="balloons.jpg" alt="balloons"></div>
</div>

weiyigeek.top-调整图像溢出图

使用 width/height 解决flex 或者 grid 布局图像填充拉伸问题

描述: 在 flex 或者 grid 布局中，默认情况下元素会被拉伸到充满整块区域，但是图像不会被拉伸，而会对齐到网格区域或者弹性容器的起始处，若此时想图像被拉伸指定 width: 100%; height: 100%; 即可, 但是通常情况下为了显示美观不会强制图像拉伸。

例如：下述示例中有一个两行两列的网格容器，里面所有的div元素有自己的背景色，被拉伸到充满了行和列，默认的图像并未被拉伸，此时设置 img 标签的 width、height 属性为100%来拉伸。

<style>
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 20px;
}

.wrapper > div {
  background-color: rebeccapurple;
  border-radius: .5em;
}
/* 关键样式 */
img {
  width: 100%;
  height: 100%;
}
</style>
<div class="wrapper">
  <img src="star.png" alt="star">
  <div></div>
  <div></div>
  <div></div>
</div>

weiyigeek.top- grid 布局图像填充图

除此之外，还可使用下述介绍的object-fit 属性来设置图像溢出时的处理。

object-fit - 指定可替换元素的内容应该如何适应到其使用高度和宽度确定的框

描述: 你可以选择对容器内的图像作其他方式的处理。例如，你可能想把一张图像调整到能够完全盖住一个盒子的大小，此时便可以使用 object-fit 属性，它可以帮助你让替换元素以多种方式被调整到合乎盒子的大小。

语法参数

object-fit: contain;  # 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。
object-fit: cover;    # 被替换的内容在保持其宽高比的同时填充元素的整个内容框。
object-fit: fill;     # 被替换的内容正好填充元素的内容框, 整个对象将完全填充拉伸此框。
object-fit: none;     # 被替换的内容将保持其原有的尺寸。
object-fit: scale-down; # 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

示例演示:

<style>
.box {
  width: 200px;
  height: 200px;
}
img {
  height: 100%;
  width: 100%;
}
.cover {
  object-fit: cover;
}
.contain {
  object-fit: contain;
}
.fill{
  object-fit: fill;
}
.scale{
  object-fit: scale-down;
}
.none{
  object-fit: none;
}
</style>
<div class="wrapper">
  <div class="box"><img src="balloons.jpg" alt="balloons" class="cover"></div>
  <div class="box"><img src="balloons.jpg" alt="balloons" class="contain"></div>
  <div class="box"><img src="balloons.jpg" alt="balloons" class="fill"></div>
  <div class="box"><img src="balloons.jpg" alt="balloons" class="scale"></div>
  <div class="box"><img src="balloons.jpg" alt="balloons" class="none"></div>
</div>

weiyigeek.top-object-fit属性替换元素盒子大小图

总结，从结果可知如果我们使用值 contain，图像就会被缩放到足以完整地放到盒子里面的大小，若使用 fill 值，它可以让图像充满盒子，但是不会维持比例。

object-position - 指定可替换元素对象的内在的大小（即它看上去的大小）

描述: 此属性规定了可替换元素的内容，在这里我们称其为对象（即 object-position 中的 object）在其内容框中的位置，若可替换元素的内容框中未被对象所覆盖的部分，则会显示该元素的背景。

语法参数:

/* 关键字值 */
object-position: top|bottom|left|right|center;

/* <percentage> 值 */
object-position: 25% 75%;

/* <length> 值 */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/* 边缘偏移值 */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

示例演示:

示例1.HTML 包含4个 <img> 元素，分别展示了不同微位置的 logo,。

<style>
img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}
/* 第一个图像的左边缘距元素框左边缘 10 个像素。 */
#object-position-1 {
  object-position: 10px;
}
/* 第二个图像的右边缘与元素框的右边缘齐平，并位于元素框高度下方 10% 处。 */
#object-position-2 {
  object-position: 100% 0%;
}
/* 第三个图像的右边缘与元素框的右边缘齐平，并位于元素框高度顶部处。 */
#object-position-3 {
  object-position: right top;
}
/* 第四个图像的左边缘与元素框的左边缘齐平，并位于元素框高度底部处。 */
#object-position-4 {
  object-position: left bottom;
}
</style>
<img id="object-position-1" src="mdn.svg" alt="Logo" />
<img id="object-position-2" src="mdn.svg" alt="Logo" />
<img id="object-position-3" src="mdn.svg" alt="Logo" />
<img id="object-position-4" src="mdn.svg" alt="Logo" />

weiyigeek.top-object-position来设置替代元素位置图

如何处理页面背景图像呢？

background-image 属性 - 设置元素单个或多个背景图像

描述: 在前面学习background的CSS属性中，简单的提及了一下其设置背景图片的相关样式参数，此处将继续验证其属性参数展示的效果。

温馨提示：背景图片在绘制时，图像以 z 方向堆叠的方式进行，并且先指定的图像会在之后指定的图像上面绘制（即顶层显示）。温馨提示：默认元素边框 border 会在他们之上被绘制，而 background-color 会在它们之下绘制，若需要改变其关系可以在 background-clip 和 background-origin 属性中定义。温馨提示：若指定的图像无法被绘制时 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 none , 此时你可以指定background-color属性来规定显示失败时默认显示的背景颜色。

语法参数

# 提供由逗号分隔的多个值来指定多个背景图像.
background-image: linear-gradient(
    to bottom,
    60deg,  # 倾斜角度
    rgba(255, 255, 0, 0.5), # 起始值
    rgba(0, 0, 255, 0.5)    # 结束值
  ), url("catfront1.png") , url("catfront2.png");  # 背景图片

示例演示:示例1.使用 url 参数指定外部图像链接以及编码数据链接。

/* 加载远程资源背景 */
body {background: url(https://img.weiyigeek.top/img/logo.png);} 

/* 加载本地编码资源背景 */
body {background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D);}

/* 除此之外 url 参数还支持如下数据展示 */
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/css,<CSS代码>
data:text/css;base64,<base64编码的CSS代码>
data:text/javascript,<Javascript代码>
data:text/javascript;base64,<base64编码的Javascript代码>
data:image/gif;base64,<base64编码的gif图片数据>
data:image/png;base64,<base64编码的png图片数据>
data:image/jpeg;base64,<base64编码的jpeg图片数据>
data:image/x-icon;base64,<base64编码的icon图片数据>

示例2.使用 url 参数加载单个或者多个背景以及渐变

/* 多个背景 */
background-image: url("./examples/lizard.png"),  /* 顶部 */
                  url("./examples/star.png");    /* 底部 */

/* 多背景渐变 */
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),  /* 底部: 渐变 */
                  url("./media/examples/lizard.png");  /* 顶部 */

/* 以 60 角度渐变 */
background-image: linear-gradient(60deg, rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),/* 底部: 渐变 */
                  url("./media/examples/lizard.png");  /* 顶部 */

/* 以从顶到底部渐变 */
background-image: linear-gradient(to bottom, blue, orange),/* 底部: 渐变 */
                  url("./media/examples/lizard.png");  /* 顶部 */

weiyigeek.top-多个背景与渐变图

background-repeat 属性 - 设置背景图像重复方式

描述: 此属性定义背景图像的重复方式，背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

温馨提示: 默认情况下，重复的图像被剪裁为元素的大小，但它们可以缩放 (使用 round) 或者均匀地分布 (使用 space).

语法参数

/* 单值语法 */
background-repeat: repeat-x;   /* 等价于 repeat no-repeat */
background-repeat: repeat-y;   /* 等价于 no-repeat repeat */
background-repeat: repeat;     /* 等价于 repeat repeat */
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法：水平 horizontal | 垂直 vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* 参数说明 */
repeat: 图像会按需重复来覆盖整个背景图片所在的区域。
space: 图像会尽可能得重复但是不会裁剪, 第一个和最后一个图像会被固定在元素 (element) 的相应的边上，同时空白会均匀地分布在图像之间。
round: 随着允许的空间在尺寸上的增长，被重复的图像将会伸展 (没有空隙), 直到有足够的空间来添加一个图像。
no-repeat: 图像不会被重复,没有被重复的背景图像的位置是由background-position属性来决定。

示例演示:

<style>
/* Shared for all DIVS in example */
li {
  margin-bottom: 12px;
}
div {
  background-image: url(starsolid.gif);
  width: 144px;
  height: 84px;
}
/* 因为 space 和 round 当前没有被广泛支持的，所以没有添加*/
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}
/* Multiple images */
.five {
  background-image: url(starsolid.gif), url(favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 160px;
}
</style>
<ol>
  <li>
    no-repeat
    <div class="one">&nbsp;</div>
  </li>
  <li>
    repeat
    <div class="two">&nbsp;</div>
  </li>
  <li>
    repeat-x
    <div class="three">&nbsp;</div>
  </li>
  <li>
    repeat-y
    <div class="four">&nbsp;</div>
  </li>
  <li>
    repeat-x, repeat-y (multiple images)
    <div class="five">&nbsp;</div>
  </li>
</ol>

执行结果:

background-size 属性 - 设置背景图像大小

描述: 此属性设置背景图片大小，图像可以保留原有尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

语法参数

/* 关键字 */
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

备注：单张图片的背景大小可以使用以下三种方法中的一种来规定，关键词 contain 、 cover，以及设定宽度和高度值。

示例演示：

<div class="demo1"> 
  <p>background-size:设置背景图片大小</p>
</div>
<style>
.demo1 {
  background-image: url(./favicon.ico);
  background-size: 75px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: rgb(0, 0, 0);
  }
</style>

执行结果:

weiyigeek.top-设置背景图像大小图

background-clip 属性 - 设置背景图像延伸

描述: 此属性用于设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面，即背景图片可以放置于 content-box、padding-box 或 border-box 区域。

weiyigeek.top-background-clip属性区域

语法参数:

/* Keyword values */
background-clip: border-box;   # 背景延伸至边框外沿（但是在边框下层）。
background-clip: padding-box;  # 背景延伸至内边距（padding）外沿。不会绘制到边框处。
background-clip: content-box;  # 背景被裁剪至内容区（content box）外沿。
background-clip: text;         # 背景被裁剪成文字的前景色。

示例演示:

<style>
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}
.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}
.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(255, 0, 255, 0.5);
}
</style>
<p class="border-box">背景延伸至边框外沿（但是在边框下层）</p>
<p class="padding-box">背景延伸至内边距（padding）外沿, 不会绘制到边框处</p>
<p class="content-box">背景被裁剪至内容区（content box）外沿</p>
<p class="text">背景被裁剪成文字的前景色，以及边框的背景色</p>

执行结果：

weiyigeek.top-背景延时图

background-position 属性 - 设置背景图像初始位置

描述：此属性为每一个背景图片设置初始位置，其位置是相对于由 background-origin 定义的位置图层的。

语法参数:

/* Keyword values，定义一组 x/y 坐标（相对于一个元素盒子模型的边界）*/
background-position: top|bottom|left|right|center;

/* <percentage> values，一个定义 x 坐标，另一个定义 y 坐标 */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images , 多个背景图片时指定 */
background-position:
  0 0,
  center;

/* Edge offsets values */
/* 第一个和第三个值是定义 X 和 Y 的关键字值，第二个和第四个值是前面 X 和 Y 关键字值的偏移量。*/
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;

/* 第1️一、两个值是关键字值，第三个是前面值的偏移量。*/
background-position: bottom 10px right;
background-position: top right 10px;

示例演示:

<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>
<style>
/* 被所有 div 共享 */
div {
  background-color: #ffee99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}
/* 这些例子使用 `background` 缩写 */
.exampleone {
  background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("startransparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}
/* 多背景图片：每个图片依次和相应的 `background-position` 匹配 */
.examplethree {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-position:
    0px 0px,
    right 3em bottom 2em;
}
</style>

演示结果:

background-origin 属性 - 设置背景图像相对区域

描述: 规定了指定背景图片 background-image 属性的原点位置的背景相对区域, 值得注意的是当 background-attachment 属性为 fixed 时，该属性将被忽略不起作用。

语法参数:

background-origin: border-box  # 背景图片的摆放以 border 区域为参考
background-origin: padding-box # 背景图片的摆放以 padding 区域为参考
background-origin: content-box # 背景图片的摆放以 content 区域为参考

示例演示:

<div class="demo1"> 
  <p>元素背景demo1, 渐变从左到右，背景图像可横向重复</p>
</div>
<div class="demo2"> 
  <p>元素背景demo2,背景不重复显示，背景图片的摆放以 border 区域为参考</p>
</div>
<div class="demo3"> 
  <p>元素背景demo3,背景可重复显示，背景图片的摆放以 padding 区域为参考</p>
</div>
<div class="demo4"> 
  <p>元素背景demo4,背景可重复显示，背景图片的摆放两边以 content 、padding区域为参考</p>
</div>
<style>
  body {margin: 0;padding: 0;}
  /* 所有 div 元素受到影响. */
  div {
    background-image: linear-gradient(60deg, rgba(99, 224, 126, 0.5),rgba(118, 150, 236, 0.5)),url(./favicon.ico);
    margin-top: 20px;
    margin-left: 100px;
    width: 80%;
    height: 135px;
    color: black;
  }
  .demo1 {
    background-repeat: repeat-x;
  }
  .demo2 {
    background-repeat: no-repeat;
    background-origin: border-box;
    border: 5px solid rgb(79, 122, 241);
    padding: 10px;
  }
  .demo3 {
    background-position: center left;
    background-origin: padding-box;
    border: 10px double;
    padding: 10px;
  }
  .demo4 {
    background-origin: content-box;
    background-position: top right, 0px 0px;
    border: 5px rgb(83, 248, 124) dotted;
    padding: 10px;
  }
</style>

演示结果:

background-attachment 属性 - 设置背景图像是固定还是滚动

描述: 此属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

语法参数:

/* 关键 属性值 */
background-attachment: scroll; /* 背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。*/
background-attachment: fixed;  /* 背景相对于视口固定，不会随着元素内容滚动 */
background-attachment: local;  /* 背景相对于元素的内容固定，若元素拥有滚动机制，背景将会随着元素的内容滚动 */

示例演示:

<p class="demo1">
  1.fixed 横向是固定的，不会随着元素内容滚动，而 scroll 相对于元素本身固定，而不是随着它的内容滚动。
</p>
<p class="demo2">
  2.local 相对于元素的内容固定，若元素拥有滚动机制，背景将会随着元素的内容滚动，垂直方向背景将会被固定。
</p>
<style>
p {width:80%;height:120px;}
/* 横向固定，竖向滑动 */
.demo1 {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: repeat-x, repeat-y;
}
/* 横向跟随文件滑动，竖向固定 */
.demo2 {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: local, fixed;
  background-repeat: repeat-x, repeat-y;
}
</style>

weiyigeek.top-设置背景图像是固定还是滚动图

background-blend-mode属性 - 设置背景图像与背景色如何混合

描述：此属性定义该元素的背景图片，以及背景色如何混合，混合模式应该按 background-image CSS 属性同样的顺序定义, 如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。

语法参数:

/* # 语法 */
background-blend-mode: <blend-mode>;

/* 参数: <blend-mode> 是一种 CSS 数据类型，用于描述当元素重叠时，颜色应当如何呈现。 */
normal: 最终颜色永远是顶层颜色，无论底层颜色是什么。 其效果类似于两张不透明的纸重叠（overlapping）在一起。
multiply: 最终颜色为顶层颜色与底层颜色相乘的结果。 如果叠加黑色层，则最终层必为黑色层，叠加白色层不会造成变化。 其效果类似于在透明薄膜上重叠印刷的两个图像。
screen: 最终的颜色是反转顶层颜色和底层颜色，将反转后的两个颜色相乘，再反转相加得到的和得到的结果。 黑色层不会造成变化，白色层导致白色最终层。 其效果类似于（被投影仪）投射到投影屏幕上的两个图像。
overlay: 如果底层颜色比顶层颜色深，则最终颜色是 multiply 的结果，如果底层颜色比顶层颜色浅，则最终颜色是 screen 的结果。 此混合模式相当于顶层与底层互换后的 hard-light。
darken: 最终颜色是由每个颜色通道下，顶底两层颜色中的最暗值所组成的颜色。
lighten: 最终颜色是每个颜色通道下，顶底两层颜色中的最亮值所组成的颜色。
color-dodge: 最终颜色是将底部颜色除以顶部颜色的反色的结果。 黑色前景不会造成变化。前景如果是背景的反色，会得到白色（fully lit color，完全亮起的颜色，应当为白色）。 此混合模式类似于 screen，但是，前景只需要和背景的反色一样亮，最终图像就会变为全白。
color-burn: 最终颜色是反转底部颜色，将反转后的值除以顶部颜色，再反转除以后的值得到的结果。 白色的前景不会导致变化，前景如果是背景的反色，会得到黑色。 此混合模式类似于 multiply，但是，前景只需要和背景的反色一样暗，最终图像就会变为全黑。
hard-light: 如果顶层颜色比底层颜色深，则最终颜色是 multiply 的结果，如果顶层颜色比底层颜色浅，则最终颜色是 screen 的结果。 此混合模式相当于顶层与底层互换后的 overlay。 其效果类似于在背景层上（用前景层）打出一片刺眼的聚光灯。
soft-light
    : 最终颜色类似于 hard-light 的结果，但更加柔和一些。 此混合模式的表现类似 hard-light。其效果类似于在背景层上（用前景层）打出一片发散的聚光灯。
    : 最终颜色是 两种颜色中较浅的颜色 减去 两种颜色中较深的颜色 得到的结果。黑色层不会造成变化，而白色层会反转另一层的颜色。
exclusion: 最终颜色类似于 difference，但对比度更低一些。 和 difference 相同，黑色层不会造成变化，而而白色层会反转另一层的颜色。
hue  : 最终颜色由顶部颜色的色调和底部颜色的饱和度与亮度组成。
saturation: 最终颜色由顶部颜色的色调和底部颜色的饱和度与发光度组成。饱和度为零的纯灰色背景层不会造成变化。
color : 最终颜色由顶部颜色的色调与饱和度和底部颜色的亮度组成。此效果保留了灰度级别，可用于为前景着色。（The effect preserves gray levels and can be used to colorize the foreground.）
luminosity : 最终颜色由顶部颜色的亮度和底部颜色的色调和饱和度组成。此混合模式相当于顶层与底层互换后的 color。

/* 单值 */
background-blend-mode: normal;

/* 双值，每个背景一个值, 以 逗号 分隔 */
background-blend-mode: darken, luminosity;

示例演示:

<style>
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
#div1 {
  width: 300px;
  height: 300px;
  background:
    url(./firefox.png)
      no-repeat center,
    linear-gradient(to bottom, blue, orange);
}
</style>
<div id="div"></div>
<div id="div1"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
<script>
// 使用 getElementById 选择 id 为 select 的元素，当其值发生改变时触发对应事件
document.getElementById("select").onchange = function (event) {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;

  document.getElementById("div1").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
</script>

执行结果:

温馨提示：由于当下还未学习到JS操作DOM，所以此处了解即可。

如何截取页面背景图像或元素呢？

clip-path 属性 - 裁剪方式创建元素的可显示区域

描述: 此属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏。

语法参数:

/* Keyword values */
clip-path: none;  # 不创建剪切路径。

/* <clip-source> values, 引用 SVG 的 <clipPath> 元素。*/
clip-path: url(resources.svg#c1);

/* <geometry-box> values */
clip-path: margin-box;  
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;    # 利用对象边界框（object bounding box）作为引用框。
clip-path: stroke-box;  # 使用笔触边界框（stroke bounding box）作为引用框。
clip-path: view-box;    # 使用最近的 SVG 视口（viewport）作为引用框。

/* <basic-shape> values */
clip-path: inset(100px 50px);  # 定义一个 inset 矩形。
clip-path: circle(50px at 0 100px);  # 定义一个圆形（使用一个半径和一个圆心位置）。
clip-path: ellipse(50px 60px at 10% 20%);  # 定义一个椭圆（使用两个半径和一个圆心位置）。
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); # 定义一个多边形（使用一个 SVG 填充规则和一组顶点）。
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);  # 定义一个任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）。

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

温馨提示: 在 clip-path 属性没有出现时常常使用 clip rect(1px, 10em, 3rem, 2ch)，当前已被丢弃,所以在开发中建议使用clip。

温馨提示: 当 clip-path 属性不为 none 时，会创建新的层叠上下文，就像 CSS opacity 的值不为 1 时那样。

示例演示:

<style>
#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);  /* 缺省使用 svg 图像来切割 */
}
</style>
<img
  id="clipped"
  src="https://blog.weiyigeek.top/img/avatar.jpg"
  alt="WeiyiGeek logo"
/>
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect x="0" y="0" width="52" height="50" /> 
      <rect x="55" y="0" width="55" height="50" />
      <rect x="0" y="52" width="52" height="55" />
      <rect x="55" y="52" width="55" height="55" />
    </clipPath>
  </defs>
</svg>
<label for="clipath">请选择 clip-path 属性值:</label>
<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(50px at 59px 59px)">标准圆心</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="inset(20px round 20px)">inset</option>
  <option value="ellipse(75px 75px at 25px 50px)">ellipse</option>
  <option value="polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)">polygon</option>
  <!-- 使用SVG 的 <clipPath> 元素定义的图形来切割 -->
  <option value="url(#cross)" >cross-使用SVG定义切割元素</option>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">
    path
  </option>
  <option value="path('M 0 45 A 30 30 0 0 1 60 45 A 30 30 0 0 1 120 45 Q 115 90 65 135 Q 0 90 0 45 Z')" selected>Love
  </option>
</select>
<script>
const clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
  document.getElementById("clipped").style.clipPath = evt.target.value;
});
</script>

演示结果: