CSS3中的mix-blend-mode和background-blend-mode

来源：互联网发布：视频录制软件电脑编辑：程序博客网时间：2024/06/05 11:14

起初想找一个算法来寻找颜色对应的对比色，以在不确定文字颜色的情况下设置其背景色，这样不至于出现颜色重合或者差别不大的情况。
然后找到了这篇文章，其中介绍了mix-blend-mode这个属性，很神奇的属性，效果：
这里写图片描述
文字会随背景色的改变进行相应改变。

mix-blend-mode

mix-blend-mode支持多个属性值，类似PS中的图片混杂模式。参考：MDN
示例：

<style>    html,    body {        height: 100%;        margin: 0;        width: 100%;    }    .wrapper {        background: url(../beach.jpg) center center no-repeat;        background-size: cover;        height: 100%;    }    .container {        color: white;        font-size: 40px;        text-align: center;        vertical-align: middle;        mix-blend-mode: difference;        height: 100%;    }    .container p {        font-size: 40px;        padding: 50px 0;        margin: 0;        background: skyblue;        line-height: 40px;        position: absolute;        top: 50%;        left: 0;        width: 100%;        transform: translateY(-50%);    }</style><body>    <div class="wrapper">        <div class="container">            <p>Lorem ipsum dolor sit.</p>        </div>    </div></body>

效果：
这里写图片描述

注： Chrome下如果北京图片设置在了body元素上则不起作用（纠结了半天是因为这个==，应该是个BUG），Firefox下两者均生效

background-blend-mode

顾名思义，设置背景图片的混杂模式。
示例：

<style>    html,    body {        height: 100%;    }    .blend {        height: 100%;        background-image: url(../beach.jpg), url(../home.jpg);        background-blend-mode: multiply;        background-size: cover;    }</style><body>    <div class="blend">    </div></body>

效果：
这里写图片描述

还可以使用渐变背景进行混合：

.blend {    height: 100%;    background: url(../beach.jpg) no-repeat, repeating-linear-gradient( 45deg,    #D3545B,    #D3545B 2rem,    transparent 2rem,    transparent 3rem);    background-size: cover;    background-blend-mode: multiply;}

效果：
这里写图片描述

阅读全文

0 0