欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中的mix-blend-mode屬性詳解(設置元素的混合模式)

  發(fā)布時間：2024-08-27 15:17:06   作者：白菜不太菜   我要評論
CSS中的mix-blend-mode屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合，這篇文章主要介紹了CSS中的mix-blend-mode屬性詳解(設置元素的混合模式),需要的朋友可以參考下

一、mix-blend-mode屬性介紹

CSS中的【mix-blend-mode屬性】描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合；

  • 用于設置元素的背景與前景之間的混合模式；
  • 可以應用于任何元素；
  • 可以與background-image屬性一起使用，創(chuàng)建各種不同的視覺效果；

二、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;色調：通過內容的色調與背景的飽和度和亮度相結合來創(chuàng)建顏色；
14mix-blend-mode: saturation;飽和度：通過內容的飽和度和背景的色調和亮度來創(chuàng)建顏色；
15mix-blend-mode: color;

顏色混合：根據內容的色調和飽和度以及背景的亮度創(chuàng)建顏色；

16mix-blend-mode: luminosity;光度：根據內容的光度和背景的色調和飽和度創(chuàng)建顏色。這與顏色屬性相反；
  • 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: "通過內容的色調與背景的飽和度和亮度相結合來創(chuàng)建顏色；"
        },
        {
            id: 14,
            name: "飽和度",
            value: "saturation",
            info: "通過內容的飽和度和背景的色調和亮度來創(chuàng)建顏色；"
        },
        {
            id: 15,
            name: "顏色混合",
            value: "color",
            info: "根據內容的色調和飽和度以及背景的亮度創(chuàng)建顏色；"
        },
        {
            id: 16,
            name: "亮度",
            value: "luminosity",
            info: "根據內容的光度和背景的色調和飽和度創(chuàng)建顏色。這與顏色屬性相反；"
        }
    ]
    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中的mix-blend-mode屬性詳解(設置元素的混合模式)的文章就介紹到這了,更多相關css mix-blend-mode屬性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • CSS中mix-blend-mode屬性的應用詳解

    在前端開發(fā)的大海中，CSS是那抹不可或缺的顏料，為網站的界面著色,本文將聚焦于其中一種鮮為人知卻強大的CSS屬性——mix-blend-mode，深入探討其定義、應用場景及用法，感
    2023-12-14

最新評論