【CSS in Depth 2 精译_083】13.3:CSS 混合模式的用法及相关注意事项 + 13.4:本章小结

当前内容所在位置(可进入专栏查看其他译好的章节内容)

  • 第四部分 视觉增强技术 ✔️
  • 【第 13 章 渐变、阴影与混合模式】 ✔️
    • 13.1 渐变
      • 13.1.1 使用多个颜色节点(上)
      • 13.1.2 颜色插值方法(中)
      • 13.1.3 径向渐变(下)
      • 13.1.4 锥形渐变(下)
    • 13.2 阴影
      • 13.2.1 利用渐变和阴影打造立体感
      • 13.2.2 使用扁平化设计创建元素
      • 13.2.3 创建混合风格的按钮外观
    • 13.3 混合模式 ✔️
      • 13.3.1 为图片上色 ✔️
      • 13.3.2 混合模式的类型 ✔️
      • 13.3.3 图片纹理的添加 ✔️
      • 13.3.4 融合混合模式的用法 ✔️
    • 13.4 本章小结 ✔️

文章目录

    • 13.3 混合模式 Blend modes
      • 13.3.1 为图片上色 Tinting an image
      • 13.3.2 混合模式的类型 Types of blend modes
      • 13.3.3 图片纹理的添加 Adding texture to an image
      • 13.3.4 融合混合模式的用法 Mix blend modes
    • 13.4 本章小结 Summary

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
本篇就 CSS 混合模式洋洋洒洒介绍了四节内容,但要真正达到熟练应用的地步,还需要大量的实践与自我摸索,文章只是提纲挈领地带大家过了一遍主要的知识点,以便今后快速定位问题。CSS 就是这样一门入门容易精通难的语言。除了文中提到的在线工具资源外,大家还可以结合剪映 APP 中的混合模式(位于画中画特效)来巩固所学。只要留心周围的应用场景、再配合目标明确的刻意练习,理论上就没有学不会的新知识。

13.3 混合模式 Blend modes

大部分情况下,无论是使用真正的图片还是设置渐变,元素一般只会使用一张背景图片。但某些情况下可能需要用到两张或者更多背景图片,CSS 也提供了相应支持。

背景图片属性(property)可以接受任意数量的属性值,每个值之间用逗号分隔即可。例如:

background-image: url(bear.jpg), linear-gradient(to bottom, #57b, #148);

使用多个背景图片时,列表中排在前面的图片会渲染到排序靠后的图片之上。在本例中,图片 bear.jpg 将遮住线性渐变。此时除非图片恰巧时半透明的,否则渐变效果是不可见的。此外还可以定义多个渐变背景,只要罗列出的第一个渐变特效包含透明或半透明的颜色,这些渐变就能相应地叠加到一起。

然而,有时可能需要对两个完全不透明的背景进行叠加,此时就可以利用 混合模式(blend mode 来加以解决。

如果熟悉图片编辑软件,那您可能见过混合模式的效果。混合模式用来控制叠放的图片怎样融合到一起。有些模式命名令人费解(enigmatic),比如滤色(screen)、颜色加深(color-burn)、强光(hard-light)等等。混合模式的典型案例如图 13.16 所示。它是由两张背景图片通过 正片叠底(multiply 的混合模式组合而成的。两个背景都使用了同一张图片,但是背景的位置不同。

图 13.16 两张背景图片以正片叠底(multiply)的混合模式组合在一起

【图 13.16 两张背景图片以正片叠底(multiply)的混合模式组合在一起】

最终呈现的效果很有意思,两张图片的副本虽然叠放在了一起,但彼此仍清晰可见。而且混合模式不会像普通的透明度设置那样,冲淡或者削弱背景整体的颜色。

下面我们来创建一个包含两个背景图片的元素,并将其混合成如图 13.16 所示的效果。新建一个页面,并添加一个类名为 blenddiv 元素。后续的几个示例还会反复用到该元素。

<div class="blend"></div>

不妨就用一个空元素来实现想要的效果。根据代码清单 13.14 提供的示例代码同步更新本地样式表,并关联到示例页面。

代码清单 13.14 混合两张背景图片

.blend {
  min-height: 70vmin;
  background-image: url(images/bear.jpg), url(images/bear.jpg); /* 两个背景图用逗号隔开 */
  background-size: cover; /* 同一属性值对两张背景图同时生效 */
  background-repeat: no-repeat; /* 同一属性值对两张背景图同时生效 */
  background-position: -30vw, 30vw; /* 给每张背景图片设置不同的初始位置 */
  background-blend-mode: multiply; /* 指定混合模式 */
}

大部分与背景相关的属性都可以接受多个值,彼此间用逗号分隔即可。例如本例中的 background-position 就用到了两个值,第一个值对第一张背景图片生效,第二个值则用于控制第二张背景图片的位置。同理,background-sizebackground-repeat 也支持多个属性值,但如果只设置一个值,则表示对所有的背景图片均有效。本例还指定了属性 min-height 的值,旨在确保元素高度不会为 0(因为是空元素)。

此外,background-size 属性还接受两个特殊的关键字:covercontain。值为 cover 时浏览器会调整背景图片的大小,使其填满整个元素,但也可能因此导致图片边缘被裁掉一部分;而值为 contain 时则可以确保整个背景图可见,尽管元素的某些区域可能不会被背景图覆盖(即 “黑边(letterboxing 1)” 效果)。该属性也可以接受长度值,用于直接设置背景图片的宽高。

尝试修改混合模式的其他属性值,例如 color-burn 或者 difference,看看它们都有那些不同的效果。这很有趣,但您可能会疑惑这些混合模式有哪些实际应用。这里列举了一些实际应用场景:

  • 利用某纯色或渐变来为图片着色;
  • 为图片添加纹理效果,比如划痕或者老胶片放映时的颗粒感等;
  • 缓和、加深或者减小图片的对比度,使图片上的文字更易于阅读;
  • 在图片上覆盖一条文字横幅,但是还想让图片完整显示。

下面我们先来看看这些应用场景的实例,之后再通过一个明细列表简要介绍当前可用的所有混合模式。

13.3.1 为图片上色 Tinting an image

通过使用混合模式,我们可以把一张全彩图片着色成单一色调的图片。下面以棕熊照片为例,演示将其着色为蓝色的具体方法,最终效果如图 13.17 所示。

图 13.17 使用单一蓝色色调着色的照片

【图 13.17 使用单一蓝色色调着色的照片】

属性 background-blend-mode 不仅合并了多个背景图片,同时还合并了 background-color。所有这些叠放的图层,最后都会被混合模式拼合在一起。因此可以把背景色设置为想要的色调并将其混合到图片中。为此,请根据代码清单 13.15 同步更新本地样式表。

代码清单 13.15 将背景颜色的色调混合到背景图片上

.blend {
    min-height: 70vmin;
    background-image: url("images/bear.jpg");
    background-color: #148; /* 蓝色背景 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: luminosity; /* 使用明度混合模式 */
}

明度混合模式将前景图层(即棕熊图片)的明度(luminosity),与背景图层(即蓝色背景层)的色调与饱和度混合。换句话说,混合后的最终结果是完全使用背景色图层的颜色,但是亮度和对比度均来自棕熊图片。

这里的关键在于,明度混合模式(以及其他几种类似的混合模式)最终的渲染效果,取决于哪个图层在其他图层之上——这一点至关重要。在本例中,背景色图层位于最底层,其他图片则叠放在背景色图层之上。

再比如,假设将蓝色图层放在棕熊图片的上面而非下面(使用渐变色来代替背景颜色),最终的渲染效果就会不同。此时为了达到同样的效果,就必须改为颜色混合模式 color —— 颜色混合模式与明度混合模式恰好相反,它获取的是前景图层中的色调和饱和度、并混合背景图层的明度来生成最终的渲染效果。

13.3.2 混合模式的类型 Types of blend modes

CSS 目前支持 15 中混合模式。每种模式使用不同的数学公式来控制图片的混合效果。对于每个像素而言,就是取一个图层上的像素颜色,与其他图层上对应像素的颜色拼合计算,生成一个新的像素颜色,最终生成一张混合图片。

所有的混合模式如表 13.1 所示。这些混合模式又可以划分为五个大类:变暗(darkening)、变亮(lightening)、对比(contrasting)、复合(compositing)与比较(comparing)。

表 13.1 混合模式可分为以下五个大类

效果分类混合模式的取值描述
变暗multiply前景颜色越亮,背景色显示出来的越多
darken选择两种颜色中较暗的那个
color-burn加深背景色,增加对比度
变亮screen前景色越暗,背景色显示出来的越多
lighten选择两种颜色中较亮的那个
color-dodge加亮背景色,降低对比度
对比overlay对暗色使用 multiply、亮色使用 screen 来增加对比度,对比效果较柔和
hard-light大幅增加对比度。与 overlay 类似,但使用强化版 multiplyscreen,对比效果明显
soft-lighthard-light 类似,但使用 burn / dodge 来代替 multiply / screen
复合hue将顶层颜色的 色调 混合到底层颜色中
saturation将顶层颜色的 饱和度 混合到底层颜色中
luminosity将顶层颜色的 亮度 混合到底层颜色中
color将顶层颜色的 色调饱和度 混合到底层颜色中
比较difference从亮色中减去暗色
exclusion类似 difference,但对比度稍弱

有的模式在实际应用中可能更有用一点,需要反复试验才能选出最合适的混合模式。您可以在 https://garden.bradwoods.io/notes/css/blend-modes 以交互式的方式预览其中的大部分混合模式效果。

13.3.3 图片纹理的添加 Adding texture to an image

混合模式的另一个应用场景,是为图片添加纹理效果。比如有一张清晰的图片,但有时处于样式考虑,您像让图片与众不同。这时就可以混合第二张图片,实现手动添加胶片噪点或其他纹理效果。

仔细观察图 13.18 所示的图片。这时之前演示过的棕熊图片,但是混合一张纹理图片后,就渲染出了类似粗制帆布(rough-hewn canvas)的效果。实现该效果有如下三种混合模式可供选择:overlayhard-light 以及 soft-light。在本例中,我们不希望更改图片的色调,因此用的是一张灰度图片(grayscale image)来提供纹理,这样就保留了原始颜色。

图 13.18 混合了纹理的图片效果

【图 13.18 混合了纹理的图片效果】

实现纹理叠加效果的样式代码如代码清单 13.16 所示。纹理图片以重复平铺(tiled)的方式叠加在棕熊图片的上方。试根据下列代码同步更新样式表,并在浏览器中查看最终的渲染效果。

代码清单 13.16 使用混合模式 soft-light 为图片添加纹理

.blend {
  min-height: 70vmin;
  background-image: url("images/scratches.png"), 
    url("images/bear.jpg"); /* 让纹理图片覆盖在主图上 */
  background-size: 200px, cover; /* 每 200px 平铺一张纹理图片 */
  background-repeat: repeat, no-repeat; /* 每 200px 平铺一张纹理图片 */
  background-position: center;
  background-blend-mode: soft-light; /* 使用柔光混合模式 */
}

纹理图片(如图 13.19 所示)的背景大小设为 200px,同时启用重复背景。这样就可以让纹理图片平铺填满整个元素。同时,第二张图片的背景大小设为 cover,且不启用重复,因此该图片不会平铺。

图 13.19 灰度模式的帆布纹理图片

【图 13.19 灰度模式的帆布纹理图片】

我发现混合模式 soft-light 对于暗色系的纹理图片效果很好,而 hard-lightoverlay 模式则更适用于亮色的纹理图片(倘若纹理图片放在了主图下方,情况则恰好相反)。然而在实际应用中,效果可能千差万别,这取决于您具体的设计需求以及基础图片的明暗程度。

13.3.4 融合混合模式的用法 Mix blend modes

尽管 background-blend-mode 属性可以实现多张图片的混合,但它仅限于混合一个元素的背景色或图片。CSS 还有一个属性 mix-blend-mode 可以实现多个元素间的混合。这样一来不仅可以混合图片,还可以把元素的文本和边框与容器的背景图片混合在一起。使用融合混合模式(mix blend mode),可以将标题渲染到图片上方,但遮住的图片部分依旧可以显示出来,如图 13.20 所示。

图 13.20 混合标题及其下方图片后的最终效果图

【图 13.20 混合标题及其下方图片后的最终效果图】

融合后的最终效果很有意思,文字看上去是透明的,就像红色横幅被剪掉了一部分似的。这里利用了 hard-light 混合模式以及中灰色文字颜色。对比混合模式(contrast blend modes)通常在使用很亮或很暗的颜色时才会有更明显的效果,这里的文字采用了中灰色(#808080),背景图层显示出来后没有太大变化。

想在浏览器中看到这样的效果,需要将标题作为示例容器的子元素添加到 HTML 页面。将以下 HTML 标记同步更新到示例页:

<div class="blend">
  <h1>Ursa Major</h1>
</div>

<h1> 元素添加样式,最终渲染为一个红色的带纯色背景的横幅,且具有亮灰色的上下粗线条边框,文字颜色为灰色。接着应用融合混合模式,将整个元素视为一个图层,并与下面容器中的背景图片混合在一起。试根据代码清单 11.17 同步更新本地样式表,并查看页面效果。

代码清单 13.17 使用融合混合模式将多个元素混合到一起

.blend {
  background-image: url("images/bear.jpg");
  background-size: cover;
  background-position: center;
  padding: 50vmin 0 1em;
}

.blend > h1 {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 6rem;
  text-align: center;
  mix-blend-mode: hard-light; /* 使用强光混合模式 */
  background-color: oklch(25% 0.2 25deg); /* 背景色为深红色 */
  color: #808080; /* 中灰色的文字颜色将变为透明 */
  border: 0.1em solid #ccc;
  border-width: 0.1em 0;
}

采用上述效果时,页面往往很难达到足够的对比度来让文字清晰可辨,因此在使用时需要特别当心。本例已采用大字号的粗字体来改善页面可读性。这样一来,在对比度较低的深色背景中,渲染效果也会相对更好一些。

混合模式在设计中有很多有趣的用法。将混合模式与渐变、阴影效果相结合,可以给页面带来很多有意思的视觉特效。但也请务必合理、审慎地利用好这些特效,当心过犹不及。


13.4 本章小结 Summary

  • 颜色渐变可视为在元素上定义的背景图片。渐变可分为线性渐变、径向渐变和锥形渐变三类。
  • 指定渐变的色彩空间可以有效控制渐变过程中的颜色插值方式。
  • 将渐变与阴影相结合,可以增强页面元素的立体感。即便采用扁平化设计也能从细微的阴影或渐变效果中汲取灵感。
  • 将渐变中的颜色节点(color stops)设置到同一位置可以实现“条纹”状效果。
  • CSS 混合模式能够合并两个及以上背景样式。利用混合模式还能为图片上色、添加纹理效果。

译注
下一篇将进入第二版全新增补的章节——《Masks, shapes, and clipping》(蒙版、形状与剪切),也是 CSS 众多新增特性中个人感觉灵活性很强的一个话题。敬请期待!



关于《CSS in Depth》(中译本书名《深入解析 CSS》)

第 1 版第 2 版
读者评分原版:4.7(亚马逊);中文版:9.3(豆瓣)原版:5.0(亚马逊);中文版:暂无,待出版
出版时间原版:2018 年 3 月;中文版:2020 年 4 月原版:2024 年 7 月;中文版:暂无,待出版
原价原版:$44.99;中文版:¥139.00原版:$59.99;中文版:暂无,待出版
现价原版:$36.49;中文版:¥52.54 起步原版:$52.09;中文版:暂无,待出版
原版国内预订起步价 ¥461.00起步价 ¥750.00

本专栏为该书第 2 版高分译文专栏,全网首发,精译精校,持续更新,计划今年内完成全书翻译,敬请期待!!!

目前已完结的章节(可进入本专栏查看详情,连载期间完全免费):

  • 第一章 层叠、优先级与继承(已完结)
    • 1.1 层叠
    • 1.2 继承
    • 1.3 特殊值
    • 1.4 简写属性
    • 1.5 CSS 渐进式增强技术
    • 1.6 本章小结
  • 第二章 相对单位(已完结)
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结
  • 第三章 文档流与盒模型(已完结)
    • 3.1 常规文档流
    • 3.2 盒模型
    • 3.3 元素的高度
    • 3.4 负的外边距
    • 3.5 外边距折叠
    • 3.6 容器内的元素间距问题
    • 3.7 本章小结
  • 第四章 Flexbox 布局(已完结)
    • 4.1 Flexbox 布局原理
    • 4.2 弹性子元素的大小
    • 4.3 弹性布局的方向
    • 4.4 对齐、间距等细节处
    • 4.5 本章小结
  • 第五章 网格布局(已完结)
    • 5.1 构建基础网格
    • 5.2 网格结构剖析 (上)
      • 5.2.1 网格线的编号(下)
      • 5.2.2 网格与 Flexbox 配合(下)
    • 5.3 两种替代语法
      • 5.3.1 命名网格线
      • 5.3.2 命名网格区域
    • 5.4 显式网格与隐式网格(上)
      • 5.4.1 添加变化 (中)
      • 5.4.2 让网格元素填满网格轨道(下)
    • 5.5 子网格(全新增补内容)
    • 5.6 对齐相关的属性
    • 5.7 本章小结
  • 第六章 定位与堆叠上下文(已完结)
    • 6.1 固定定位
      • 6.1.1 创建一个固定定位的模态对话框
      • 6.1.2 在模态对话框打开时防止屏幕滚动
      • 6.1.3 控制定位元素的大小
    • 6.2 绝对定位
      • 6.2.1 关闭按钮的绝对定位
      • 6.2.2 伪元素的定位问题
    • 6.3 相对定位
      • 6.3.1 创建下拉菜单(上)
      • 6.3.2 创建 CSS 三角形(下)
    • 6.4 堆叠上下文与 z-index
      • 6.4.1 理解渲染过程与堆叠顺序(上)
      • 6.4.2 用 z-index 控制堆叠顺序(上)
      • 6.4.3 深入理解堆叠上下文(下)
    • 6.5 粘性定位
    • 6.6 本章小结
  • 第七章 响应式设计(已完结)
    • 7.1 移动端优先设计原则(上篇)
      • 7.1.1 创建移动端菜单(下篇)
      • 7.1.2 给视口添加 meta 标签(下篇)
    • 7.2 媒体查询(上篇)
      • 7.2.1 深入理解媒体查询的类型(上篇)
      • 7.2.2 页面断点的添加(中篇)
      • 7.2.3 响应式列的添加(下篇)
    • 7.3 流式布局
    • 7.4 响应式图片
    • 7.5 本章小结
  • 第八章 层叠图层及其嵌套
    • 8.1 用 layer 图层来操控层叠规则(上篇)
      • 8.1.1 图层的定义(上篇)
      • 8.1.2 图层的顺序与优先级(下篇)
      • 8.1.3 revert-layer 关键字(下篇)
    • 8.2 层叠图层的推荐组织方案
    • 8.3 伪类 :is() 和 :where() 的用法
    • 8.4 CSS 嵌套的使用
      • 8.4.1 嵌套选择器的使用
      • 8.4.2 深入理解嵌套选择器
      • 8.4.3 媒体查询及其他 @规则 的嵌套
    • 8.5 本章小结
  • 第九章 CSS 的模块化与作用域
    • 9.1 模块的定义
      • 9.1.1 模块和全局样式
      • 9.1.2 一个简单的 CSS 模块
      • 9.1.3 模块的变体
      • 9.1.4 多元素模块
    • 9.2 将模块组合为更大的结构
      • 9.2.1 模块中多个职责的拆分
      • 9.2.2 模块的命名
    • 9.3 CSS 的作用域
      • 9.3.1 CSS 作用域的就近原则
      • 9.3.2 划定作用域的边界
      • 9.3.3 CSS 中的隐式作用域
      • 9.3.4 关于 CSS 作用域与层叠图层
    • 9.4 CSS 模式库
    • 9.5 本章小结
  • 第十章 CSS 容器查询
    • 10.1 容器查询的一个简单示例
      • 10.1.1 容器尺寸查询的用法
    • 10.2 深入理解容器
      • 10.2.1 容器的类型
      • 10.2.2 容器的名称
      • 10.2.3 容器与模块化 CSS
    • 10.3 与容器相关的单位
    • 10.4 容器样式查询的用法
      • 10.4.1 将模块与所在容器解耦
      • 10.4.2 减少重复代码
    • 10.5 本章小结
  • 第 11 章 颜色与对比
    • 11.1 通过对比进行交流
      • 11.1.1 模式的建立
      • 11.1.2 还原设计稿
    • 11.2 颜色的定义
      • 11.2.1 色域与色彩空间
      • 11.2.2 CSS 颜色表示法(RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH)
    • 11.3 利用 OKLCH 处理颜色(上篇)
      • 11.3.4 从页面其他颜色衍生出新颜色(下篇)
    • 11.4 思考字体颜色的对比效果
    • 11.5 本章小结
  • 第 12 章 CSS 排版与间距
    • 12.1 间距设置
      • 12.1.1 使用 em 还是 px
      • 12.1.2 对行高的深入思考
      • 12.1.3 行内元素的间距设置
    • 12.2 Web 字体
    • 12.3 谷歌字体
    • 12.4 @font-face 的工作原理
      • 12.4.1 字体格式与回退处理
      • 12.4.2 同一字型的多种变体形式
    • 12.5 性能因素考量
      • 12.5.1 font-display 属性解析
      • 12.5.2 可变字体的用法
    • 12.6 调整字间距,提升可读性
      • 12.6.1 正文的字间距
      • 12.6.2 标题、小元素和间距
    • 12.7 本章小结
  • 附录
    • 附录A:CSS 选择器参考
    • 附录B:CSS 预处理器简介

  1. 译注:letterboxing 是一种屏幕宽高比渲染方式,是指如果要在宽高比为 4:3 的设备上渲染 16:9 的图像,为了保留画面完整性,图像将与设备同宽,并在上下添加黑边的显示模式。 ↩︎

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/939973.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

环境变量的知识

目录 1. 环境变量的概念 2. 命令行参数 2.1 2.2 创建 code.c 文件 2.3 对比 ./code 执行和直接 code 执行 2.4 怎么可以不带 ./ 2.4.1 把我们的二进制文件拷贝到 usr/bin 路径下&#xff0c;也不用带 ./ 了 2.4.2 把我们自己的路径添加到环境变量里 3. 认识PATH 3.…

Linux Swap: 深入解析 mkswap, mkfs.swap, 和 swapon

文章目录 Linux Swap: 深入解析 mkswap, mkfs.swap, 和 swapon什么是 Swap&#xff1f;主要命令介绍1. mkswap2. mkfs.swap3. swapon 创建和管理 Swap 的步骤1. 创建 Swap 分区2. 初始化 Swap3. 激活 Swap4. 持久化配置5. 查看 Swap 状态 删除 Swap 分区或文件1. 停用 Swap2. 删…

模具生产过程中的标签使用流程图

①NFC芯片嵌入周转筐&#xff0c;通过读卡器读取CK_Label_v3的数据&#xff0c;并将这些信息上传至服务器进行存储&#xff1b; ②服务器随后与客户的WMS&#xff08;仓库管理系统&#xff09;进行交互&#xff0c;记录和同步注塑机的原始数据&#xff1b; ③当周转筐内的模具…

自己搭建专属AI:Llama大模型私有化部署

前言 AI新时代&#xff0c;提高了生产力且能帮助用户快速解答问题&#xff0c;现在用的比较多的是Openai、Claude&#xff0c;为了保证个人隐私数据&#xff0c;所以尝试本地&#xff08;Mac M3&#xff09;搭建Llama模型进行沟通。 Gpt4all 安装比较简单&#xff0c;根据 G…

【笔记】深度学习模型评估指标

推荐链接&#xff1a; &#xff08;0&#xff09;多分类器的评价指标 &#xff08;1&#xff09;泛化误差的评价方法&#xff1a;【机器学习】模型评估与选择&#xff08;留出法、交叉验证法、查全率、查准率、偏差、方差&#xff09; &#xff08;2&#xff09;机器学习&…

前端实现页面自动播放音频方法

前端实现页面视频在谷歌浏览器中自动播放音频方法 了解Chrome自动播放策略 在Chrome和其他现代浏览器中&#xff0c;为了改善用户体验&#xff0c;自动播放功能受到了限制。Chrome的自动播放策略主要针对有声音的视频&#xff0c;目的是防止页面在用户不知情的情况下自动播放声…

MinCostMaxFlow-Graph Algorithm

lab要求如下&#xff1a; 1.代码实现思路 图的构建 使用邻接表 adjacencyList 来存储图的结构&#xff0c;每个节点对应一个列表&#xff0c;列表中存储从该节点出发的所有边。 通过 addEdge 方法添加有向边及其反向边&#xff0c;同时设置正向边和反向边的相互引用。 最小费…

简单工厂模式和策略模式的异同

文章目录 简单工厂模式和策略模式的异同相同点&#xff1a;不同点&#xff1a;目的&#xff1a;结构&#xff1a; C 代码示例简单工厂模式示例&#xff08;以创建图形对象为例&#xff09;策略模式示例&#xff08;以计算价格折扣策略为例&#xff09;UML区别 简单工厂模式和策…

欢迎 PaliGemma 2 – 来自 Google 的新视觉语言模型

我们很高兴迎来 Google 全新的视觉语言模型 PaliGemma 2&#xff0c;这是 PaliGemma 的一个新版本。与其前代产品一样&#xff0c;PaliGemma 2 使用强大的SigLIP进行视觉处理&#xff0c;但在文本解码部分升级到了最新的 Gemma 2。 https://hf.co/collections/google/siglip-65…

Django基础 - 01入门简介

一、 基本概念 1.1 Django说明 Django发布于2005年&#xff0c; 网络框架&#xff0c; 用Python编写的开源的Web应用框架。采用了MVC框架模式&#xff0c;也称为MTV模式。官网&#xff1a; https://www.djangoproject.com1.2 MVC框架 Model&#xff1a; 封装和数据库相关…

华为OD --- 敏感字段加密

华为OD --- 敏感字段加密 题目独立实现思路源码实现 参考实现 题目 独立实现 思路 通过便利字符串把所有“关键字”找出来,然后将第N个关键字替换成******,最后再通过 “_” 拼接起来即可 源码实现 const rl require("readline").createInterface({ input: proce…

WebRTC服务质量(05)- 重传机制(02) NACK判断丢包

WebRTC服务质量&#xff08;01&#xff09;- Qos概述 WebRTC服务质量&#xff08;02&#xff09;- RTP协议 WebRTC服务质量&#xff08;03&#xff09;- RTCP协议 WebRTC服务质量&#xff08;04&#xff09;- 重传机制&#xff08;01) RTX NACK概述 WebRTC服务质量&#xff08;…

着色器 (三)

今天&#xff0c;是我们介绍opengl着色器最后一章&#xff0c;着色器(Shader)是运行在GPU上的小程序。这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说&#xff0c;着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立的程序&#xff0c;因为它们之…

【Linux网络】网络基础:IP协议

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;Linux “ 登神长阶 ” &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ IP协议 IP协议基本概念协议头格式分片与组装网段划分子网掩码特殊的IP地址 IP地址的数量限制…

neo4j 图表数据导入到 TuGraph

neo4j 图表数据导入到 TuGraph 代码文件说明后文 前言:近期在引入阿里的 TuGraph 图数据库&#xff0c;需要将 原 neo4j 数据导入到新的 tugraph 数据库中。预期走csv文件导入导出&#xff0c;但因为格式和数据库设计问题&#xff0c;操作起来比较麻烦&#xff08;可能是个人没…

Node.js安装(含npm安装vue-cli,安装element-ui)的详细配置

搭建前端框架 前端平台 量子计算机–10^5级别运算只需5min&#xff0c;这代表可以计算从宇宙大爆炸到现在的数据可以计算 安卓工程师–.xml node.js 下载 运行在win/linus的js——node.js 安装 建议不要动路径&#xff0c;可以避免很多问题&#xff0c;但是要保证C盘有至少1…

亚马逊云科技 re:Invent 2024重磅发布!Amazon Bedrock Data Automation 预览版震撼登场

AWS re:Invent 2024 已圆满落幕&#xff01; 在本次大会中&#xff0c;隆重推出了一项全新功能&#xff1a; Amazon Bedrock Data Automation&#xff08;预览版&#xff09;震撼登场&#xff01; New Amazon Bedrock capabilities enhance data processing and retrieval | …

JAVA:组合模式(Composite Pattern)的技术指南

1、简述 组合模式(Composite Pattern)是一种结构型设计模式,旨在将对象组合成树形结构以表示“部分-整体”的层次结构。它使客户端对单个对象和组合对象的使用具有一致性。 设计模式样例:https://gitee.com/lhdxhl/design-pattern-example.git 2、什么是组合模式 组合模式…

计算机基础 试题

建议做的时候复制粘贴,全部颜色改为黑色,做完了可以看博客对答案。 一、单项选择题(本大题共25小题,每小题2分,共50分〉 1.计算机内部采用二进制数表示信息,为了便于书写,常用十六进制数表示。一个二进制数0010011010110用十六进制数表示为 A.9A6 B.26B C.4D6 D.…

SAP ABAP-日期格式问题 SAP内部错误,反序列化JSON字符串时发生异常 值 20241215 不是根据 ABAP 的 XML 格式的有效日期

SAP ABAP-日期格式问题 SAP内部错误,反序列化JSON字符串时发生异常 值 20241215 不是根据 ABAP 的 XML 格式的有效日期 在SAP内部用 YYYYMMDD没有问题 外部传入参数