如何将前景元素的颜色与背景元素的颜色进行混合

‭‭一笑奈何‭

已于 2024-08-15 14:57:10 修改

阅读量96

点赞数 4

文章标签： css

于 2024-08-15 14:53:11 首次发布

本文链接：https://blog.csdn.net/weixin_45792390/article/details/141222181

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
     mix-blend-mode 是一个 CSS 属性，用来设置元素的内容与其背景内容或父级元素之间的混合模式。
     它定义了如何将前景元素的颜色与背景元素的颜色进 
     mix-blend-mode: darken; 是 mix-blend-mode 的一种混合模式，具体说   
     mix-blend-mode: darken;
     作用：darken 模式会比较前景元素和背景元素对应位置的颜色值，并保留其中较暗的颜色。
     也就是说，颜色通道（红色、绿色和蓝色）中的每一个都会选择前景和背景中的较小值，从而产生较暗    
     使用场景：当你希望一个元素的颜色只影响其背景较亮的部分，而保持较暗的部分不变时，
     可以使用 darken 模式。这种模式常用于图片叠加效果、渐变背景，或者在图像处理和艺术设计中制造特殊的效果。

     mix-blend-mode 其他常用模式：
     normal：默认模式，不进行任何颜色混合。
     multiply：前景颜色与背景颜色相乘，通常会产生更暗的颜色。
     screen：前景颜色与背景颜色相反相乘，通常会产生更亮的颜色。
     overlay：结合 multiply 和 screen 模式，根据背景的亮度决定应用哪种模式。
    -->
    <style>
        /* 白底图片更改背景色方法一  ---通过伪元素来实现 */
        .container {
            width: 500px;
            height: 500px;
            position: relative;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }

        .img-overlay-grey1:after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: red;
            opacity: .03;
            pointer-events: none;

        }

        /* 白底图片更改背景色方法二   --通过CSS 属性 mix-blend-mode:multiply 来实现 */
        .img-overlay-grey2 {
            background-color: #f6f6f8;

        }

        .img-overlay-grey2 img {
            /* 让图片的白色背景与背景色融合 */
            mix-blend-mode: multiply;
        }

        /* 白底图片更改背景色方法三  --通过CSS 属性 mix-blend-mode:darken  */
        .img-overlay-grey3 {
            background-color: #efefef;
        }

        .container-image3 {
            /* 应用 darken 混合模式 */
            mix-blend-mode: darken;
        }
    </style>
    <!--   HTML 示例 -->
    <div class="container img-overlay-grey1">
        <img
            src="https://cdn.shopify.com/s/files/1/0784/0527/1858/files/Main_9129b69a-0c7b-4f66-b6cf-c4222f18028a_500x.jpg?v=1713862888">
    </div>
    <div class="container img-overlay-grey2">
        <img
            src="https://cdn.shopify.com/s/files/1/0784/0527/1858/files/Main_9129b69a-0c7b-4f66-b6cf-c4222f18028a_500x.jpg?v=1713862888">
    </div>

    <div class="container img-overlay-grey3">
        <div class="container-image3">
            <img
                src="https://cdn.shopify.com/s/files/1/0784/0527/1858/files/Main_9129b69a-0c7b-4f66-b6cf-c4222f18028a_500x.jpg?v=1713862888">
        </div>
    </div>

</body>

</html>