CSS：mix-blend-mode属性（设置元素的混合模式）

已于 2024-07-25 09:05:45 修改
阅读量955 收藏 25
点赞数 28
分类专栏： CSS 文章标签： css html 前端
于 2024-07-24 20:42:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65029152/article/details/140600033
版权

目录

一、mix-blend-mode属性介绍

二、mix-blend-mode常用属性值

三、mix-blend-mode属性应用

四、文字智能适配背景

1、原始样式

2、添加混合 

3、实现代码 

一、mix-blend-mode属性介绍

CSS中的【mix-blend-mode属性】描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合；

  • 用于设置元素的背景与前景之间的混合模式；
  • 可以应用于任何元素；
  • 可以与background-image属性一起使用，创建各种不同的视觉效果；

二、mix-blend-mode常用属性值

序号属性值混合模式及说明
1mix-blend-mode: normal;正常：此属性不应用任何混合；
2mix-blend-mode: multiply;

相乘：元素乘以背景并替换背景颜色，生成的颜色始终与背景一样暗；

3mix-blend-mode: overlay;

叠加：根据背景颜色对内容进行倍增或屏蔽，这与硬光混合模式相反；

4mix-blend-mode: screen;

屏幕：将背景和内容相乘，然后补充结果。这将导致内容比背景颜色更亮；

5mix-blend-mode: darken;变暗；当内容变暗时，背景将被替换为内容，否则将保持原样；
6mix-blend-mode: lighten;

变亮：背景被替换为内容较亮的内容；

7mix-blend-mode: color-dodge;颜色变淡：此属性使背景颜色变亮，以反映内容的颜色；
8mix-blend-mode: color-burn;颜色变淡：这会使背景变暗，以反映内容的自然颜色；
9mix-blend-mode: hard-light;硬光：根据内容的颜色，此属性将对其进行筛选或倍增；
10mix-blend-mode: soft-light;柔光：根据内容的颜色，这会使其变暗或变亮；
11mix-blend-mode: difference;差值：这将从最亮的颜色中减去两种颜色中较深的一种；
12mix-blend-mode: exclusion;排除：与差值相似，但对比度较低；
13mix-blend-mode: hue;色调：通过内容的色调与背景的饱和度和亮度相结合来创建颜色；
14mix-blend-mode: saturation;饱和度：通过内容的饱和度和背景的色调和亮度来创建颜色；
15mix-blend-mode: color;

颜色混合：根据内容的色调和饱和度以及背景的亮度创建颜色；

16mix-blend-mode: luminosity;光度：根据内容的光度和背景的色调和饱和度创建颜色。这与颜色属性相反；
  • normal : this attribute applies no blending whatsoever.
  • multiply : the element is multiplied by the background and replaces the background color. The resulting color is always as dark as the background.
  • screen : multiplies the background and the content then complements the result. This will result in content which is brighter than the background-color.
  • overlay : multiplies or screens the content depending on the background color. This is the inverse of the hard-light blend mode.
  • darken : the background is replaced with the content where the content is darker, otherwise, it is left as it was.
  • lighten : the background is replaced with the content where the content is lighter.
  • color-dodge : this attribute brightens the background color to reflect the color of the content.
  • color-burn : this darkens the background to reflect the content’s natural color.
  • hard-light : depending on the color of the content this attribute will screen or multiply it.
  • soft-light : depending on the color of the content this will darken or lighten it.
  • difference : this subtracts the darker of the two colors from the lightest color.
  • exclusion : similar to difference but with lower contrast.
  • hue : creates a color with the hue of the content combined with the saturation and luminosity of the background.
  • saturation : creates a color with the saturation of the content combined with the hue and luminosity of the background.
  • color : creates a color with the hue and saturation of the content and the luminosity of the background.
  • luminosity : creates a color with the luminosity of the content and the hue and saturation of the background. This is the inverse of the color attribute.

三、mix-blend-mode属性应用

1、应用效果

mix-blend-mode属性的应用

2、相关代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mix-blend-mode属性的应用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            /* 定义变量 */
            --mix-blend-mode: normal;

            position: relative;
            width: 300px;
            height: 400px;
            margin: 60px;
            padding: 20px;
            box-shadow: 0 0 6px 1px #999;
            border-radius: 6px;
            caret-color: transparent;
        }

        h3,
        h4 {
            margin-bottom: 10px;
        }

        .info-box {
            width: 100%;
            height: 24px;
            line-height: 24px;
        }

        .circle {
            position: absolute;

            width: 200px;
            height: 200px;
            border-radius: 50%;

            mix-blend-mode: var(--mix-blend-mode);
        }

        .red-box {
            left: 70px;
            top: 160px;
            background-color: red;
        }

        .green-box {
            left: 30px;
            top: 220px;
            background-color: lightgreen;
        }

        .blue-box {
            left: 110px;
            top: 220px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>mix-blend-mode属性的应用</h3>
        <h4 class="value-box"></h4>
        <div class="info-box"></div>
        <div class="circle red-box"></div>
        <div class="circle green-box"></div>
        <div class="circle blue-box"></div>
    </div>
</body>
<script>
    // 获取元素
    var container = document.querySelector(".container");
    var valueBox = document.querySelector(".value-box");
    var infoBox = document.querySelector(".info-box");

    // mix-blend-mode属性的取值列表及说明;
    var values = [
        {
            id: 1,
            name: "正常",
            value: "normal",
            info: "此属性不应用任何混合；"
        },
        {
            id: 2,
            name: "相乘",
            value: "multiply",
            info: "元素乘以背景并替换背景颜色，生成的颜色始终与背景一样暗；"
        },
        {
            id: 3,
            name: "叠加",
            value: "overlay",
            info: "根据背景颜色对内容进行倍增或屏蔽；这与硬光混合模式相反；"
        },
        {
            id: 4,
            name: "屏幕",
            value: "screen",
            info: "将背景和内容相乘，然后补充结果。这将导致内容比背景颜色更亮；"
        },
        {
            id: 5,
            name: "变暗",
            value: "darken",
            info: "当内容变暗时，背景将被替换为内容，否则将保持原样；"
        },
        {
            id: 6,
            name: "变亮",
            value: "lighten",
            info: "背景被替换为内容较亮的内容；"
        },
        {
            id: 7,
            name: "颜色变淡",
            value: "color-dodge",
            info: "此属性使背景颜色变亮，以反映内容的颜色;"
        },
        {
            id: 8,
            name: "颜色变淡",
            value: "color-burn",
            info: "这会使背景变暗，以反映内容的自然颜色;"
        },
        {
            id: 9,
            name: "硬光",
            value: "hard-light",
            info: "根据内容的颜色，此属性将对其进行筛选或倍增。"
        },
        {
            id: 10,
            name: "柔光",
            value: " soft-light",
            info: "根据内容的颜色，这会使其变暗或变亮；"
        },
        {
            id: 11,
            name: "差值",
            value: "difference",
            info: "这将从最亮的颜色中减去两种颜色中较深的一种；"
        }, {
            id: 12,
            name: "排除",
            value: "exclusion",
            info: "与差值相似，但对比度较低；"
        },
        {
            id: 13,
            name: "色调",
            value: "hue",
            info: "通过内容的色调与背景的饱和度和亮度相结合来创建颜色；"
        },
        {
            id: 14,
            name: "饱和度",
            value: "saturation",
            info: "通过内容的饱和度和背景的色调和亮度来创建颜色；"
        },
        {
            id: 15,
            name: "颜色混合",
            value: "color",
            info: "根据内容的色调和饱和度以及背景的亮度创建颜色；"
        },
        {
            id: 16,
            name: "亮度",
            value: "luminosity",
            info: "根据内容的光度和背景的色调和饱和度创建颜色。这与颜色属性相反；"
        }
    ]

    changeMode();
    // 改变mix-blend-mode
    function changeMode() {
        let index = 0;
        modAttr(index);
        let timerId = setInterval(() => {
            if (index >= values.length) {
                clearInterval(timerId);
                return;
            }
            index++;
            modAttr(index)
        }, 3000)
    }
    function modAttr(index) {
        // 设置mix-blend-mode的属性值
        container.style.setProperty('--mix-blend-mode', values[index].value);
        valueBox.innerHTML = `mix-blend-mode : ${values[index].value};`;
        infoBox.innerHTML = `${values[index].name}(${values[index].value}): ${values[index].info}`
    }

</script>

</html>

四、文字智能适配背景

很多时候，文字需要压着图片显示，如果文字和图片的颜色接近，可读性就会受到严重影响；

如何能让文字自动适配背景？

就可以利用mix-blend-mode属性，设置文字与背景的颜色混合，实现文字适配背景效果；

1、原始样式

文字颜色为白色；在一些图片上的可读性很差；

.grid-item > h3 {
    color: rgb(255, 255, 255);
    ......
}

2、添加混合 

设置mix-blend-mode属性为difference；

文字颜色的初始值是白色，但会与父元素背景对应的每像素颜色值进行差值计算，得到一个新的颜色值；

文字颜色值 - 背景颜色值 = 混合后的像素值；（每一像素）

例如：文字颜色（255, 255, 255），背景颜色（255, 255, 255），计算后的值（0, 0, 0），显示为黑色；

.grid-item>h3 {
    color: rgb(255, 255, 255);
    /* 设置混合模式 -- 计算差值 */
    mix-blend-mode: difference;
    ......
}

注意：这里的差值混合模式是应用在文字上的；

3、实现代码 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字智能适配背景</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            width: 100vw;
            height: 60vh;
            justify-content: center;
            align-items: center;
        }

        .grid-container {
            display: grid;
            grid-template-columns: 400px 400px 400px;
            grid-template-rows: 200px 200px;
            gap: 10px;
        }

        .grid-item {
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 6px;
            box-shadow: 0 0 6px 1px #999;
        }

        .grid-item>h3 {
            color: rgb(255, 255, 255);
            font-size: 36px;
            /* 设置混合模式 -- 计算差值 */
            mix-blend-mode: difference;
        }

        .grid-item:nth-child(1) {
            /* background-image: url("D:\\test\\zyl-img\\bg_1.jpg"); */
            background-color: red
        }

        .grid-item:nth-child(2) {
            /* background-image: url("D:\\test\\zyl-img\\bg_2.jpg"); */
            background-color: purple;
        }

        .grid-item:nth-child(3) {
            /* background-image: url("D:\\test\\zyl-img\\bg_3.jpg"); */
            background-color: yellow;
        }

        .grid-item:nth-child(4) {
            /* background-image: url("D:\\test\\zyl-img\\bg_4.jpg"); */
            background-color: green;
        }

        .grid-item:nth-child(5) {
            /* background-image: url("D:\\test\\zyl-img\\bg_5.jpg"); */
            background-color: teal;
        }

        .grid-item:nth-child(6) {
            /* background-image: url("D:\\test\\zyl-img\\bg_6.jpg"); */
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="grid-container">
            <div class="grid-item">
                <h3>mix-blend-mode属性的应用</h3>
            </div>
            <div class="grid-item">
                <h3>mix-blend-mode属性的应用</h3>
            </div>
            <div class="grid-item">
                <h3>mix-blend-mode属性的应用</h3>
            </div>
            <div class="grid-item">
                <h3>mix-blend-mode属性的应用</h3>
            </div>
            <div class="grid-item">
                <h3>mix-blend-mode属性的应用</h3>
            </div>
            <div class="grid-item">
                <h3>mix-blend-mode属性的应用</h3>
            </div>
        </div>
    </div>
</body>

</html>

=========================================================================

每天进步一点点~！

记录一下CSS中的这个属性~~！

白菜不太菜
关注
  • 28
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css mix-blend,CSS混合模式mix-blend-mode/background-blend-mode简介
weixin_29817227的博客
08-04 896
一、关于混合模式熟悉PS的人都应该知道混合模式：SVG以及Canvas中也有混合模式，本质上都是一样的。下面是一些常见的混合模式的算法：维基上也有说明。有兴趣可以了解下。本文内容则简单介绍CSS3出现了两个与混合模式有关的属性，mix-blend-mode和background-blend-mode.二、CSS3 mix-blend-mode首先，要知道”blend-mode”就是混合模式的意思。...
CSS:mix-blend-mode 颜色混合
qq_45820271的博客
03-17 723
CSS的mix-blend-mode 颜色混合属性
前端 CSS 经典：mix-blend-mode 属性
weixin_64684095的博客
06-23 255
前言：这是一个混合属性，作用是将两个颜色混合生成一个新颜色。可以将视频和文字相融合，产生。
css mix-blend,详解CSS3的mix-blend-mode属性
weixin_39630813的博客
08-04 1218
1、相当于加了一个图层mix-blend-mode: multiply;2、相当于加了一个滤镜mix-blend-mode: screen;3、相当于加了一个图层和滤镜mix-blend-mode: overlay;4、会使图片变暗，出现变暗效果mix-blend-mode: darken;5、这个模式与darken相反，* 它的效果取决于源和背景颜色之间更浅的(色彩)。* 即将两像素的RGB值进...
CSS3混合模式mix-blend-mode/background-blend-mode简介
11-21
CSS3的混合模式引入了两种新的属性，即`mix-blend-mode`和`background-blend-mode`，它们为网页设计提供了更多的创意可能性。混合模式在图像处理领域并不陌生，如Photoshop、SVG和Canvas中都有应用，它们允许不同...
2DHEX：基于CSS mix-blend-mode属性的2D色彩转换图像
02-17
在实际应用中，开发人员或设计师可以通过修改CSS代码中的“mix-blend-mode”属性值，来改变不同颜色层之间的混合模式，如正常、暗调、柔光、差值等，从而创造出各种独特的视觉效果。此外，还可以结合其他CSS属性，如...
150928_css3_blendmode:这是文章“以CSS3 mix-blend-mode实现的绘图表达”的示例。
05-06
通过CSS3的mix-blend-mode实现的图形表达演示网址拖动鼠标进行操作。屏幕上绘制了一张彩色的图。评论文章有关详细信息，请参见用ICS ... 它是使用CSS3的mix-blend-mode属性创建的。使用的图书馆 2015.05.21版本 v3.0.7
深入剖析z-index属性
09-24
- mix-blend-mode值不为normal。 - filter值不为none。 - isolation值为isolate。 - 在某些浏览器中，position:fixed需要配合z-index:数字。 - will-change属性指定的值与上述条件之一匹配，用于优化GPU渲染。 ...
CSS学习笔记
ngczx的博客
07-23 461
CSS学习笔记
【前端 02】新浪新闻项目-初步使用CSS来排版
delepaste的博客
07-23 1265
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
CSS技巧专栏：一日一例 11 -纯CSS实现多彩渐变按钮系列特效
uu0216的博客
07-24 572
这是一个系列的按钮，它们具有共同的特点：底层按钮层，具有一个彩色的渐变边框，上层是依据hover效果需要，可以是渐变，可以时白色。鼠标hover效果都是一样的：背景色位移或变化。本篇文章仅介绍第三个按钮的做法，其他的做法，我会写在源文件里，但不写在本篇里。
[微信小程序] css 解决纯数字或字母不自动换行的问题、控制文字行数
Lovely Ruby 的手账
07-24 311
作用：这个属性是一个非标准的Webkit特定属性，它使得元素使用弹性盒模型（Flexbox的前身）。这允许使用-webkit-line-clamp和-webkit-box-orient属性。示例场景：当你有一个固定宽度的容器，而其中的文本可能包含非常长的单词或URL时，这个属性可以防止文本溢出容器边界。作用：这个属性允许在单词内部进行换行，即使单词很长也不会溢出容器，而是会在必要的地方打断单词以适应容器宽度。示例场景：与-webkit-line-clamp一起使用，确保文本按垂直方向截断。
css黑色二级下拉导航菜单
u011626414的专栏
07-23 219
上时，二级菜单会显示出来。你可以根据需要调整样式和布局。当鼠标悬停在包含二级菜单的。黑色二级下拉导航菜单。
WebKit的文本装饰艺术：CSS Text Decoration全解析
2402_85758936的博客
07-24 1114
CSS文本装饰（Text Decoration）是一组用于美化和增强网页文本表现的属性，它们可以为文本添加下划线、上划线、线删除和强调标记等效果。CSS文本装饰是一组强大的属性，它们为网页文本提供了丰富的视觉效果。虽然WebKit对CSS文本装饰的支持良好，但不同浏览器和不同版本的WebKit可能存在兼容性差异。CSS文本装饰对性能的影响通常很小，但在处理复杂的布局或在性能受限的设备上使用时，可能会有一些性能开销。通过本文的指导，读者可以开始在自己的项目中尝试使用CSS文本装饰，享受更丰富的文本美化体验。
css快捷代码【超出一行文本显示省略号/超出三行显示省略号/超出n行...】
weixin_43811753的博客
07-24 236
css快捷代码【超出一行文本显示省略号/超出三行显示省略号/超出n行...】
CSS实现图片边框酷炫效果
最新发布
流绪@微梦
07-26 534
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS实现的扫光效果组件
毛毛的博客
07-23 347
详细内容与注释：CSS实现的扫光效果组件。组件代码在底部掘金平台，如有遗漏，及时与我联系~扫光效果的原理就是从左到右无限循环的一个位移动画。图片和内容如有侵权，及时与我联系~
css气泡背景特效
u011626414的专栏
07-23 332
动画是可选的，并且它实际上并不创建额外的气泡效果，而只是让整个背景有微妙的移动。如果你想要更多的气泡，并且希望它们随机出现和消失，你可能需要使用JavaScript或更复杂的CSS动画来生成它们。此外，你可以通过添加更多的伪元素、改变它们的尺寸、颜色、动画延迟和持续时间等来创建更复杂和多样化的气泡效果。要创建一个CSS气泡背景特效，你可以使用CSS的伪元素（属性来创建圆形或椭圆形的“气泡”，以及。属性来设置背景和动画效果。请注意，上述示例中的。
js如何修改css得你可以使用CSS的mix-blend-mode
06-02
抱歉，我的回答有误。JS是一种编程语言，不能直接修改CSS的属性。你可以使用JS来操作DOM元素的style属性，来改变CSS的属性。 例如，你可以使用JS来获取一个元素的style属性，然后修改其mix-blend-mode属性。示例代码如下： ```html <div id="myDiv" style="mix-blend-mode: multiply;"></div> ``` ```javascript var myDiv = document.getElementById("myDiv"); myDiv.style.mixBlendMode = "screen"; ``` 上面的代码中，我们首先获取了一个ID为"myDiv"的元素，然后修改了其mix-blend-mode属性为"screen"。这样就可以实现动态修改CSS属性的效果了。 需要注意的是，mix-blend-mode属性只适用于一些特定的情况，例如元素有背景色或者图像等。如果元素没有背景色或图像，则mix-blend-mode属性将无效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值