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

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

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>

效果:
CSS3中的mix-blend-mode和background-blend-mode_第2张图片

注: 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>

效果:
CSS3中的mix-blend-mode和background-blend-mode_第3张图片

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

.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;
}

效果:
CSS3中的mix-blend-mode和background-blend-mode_第4张图片

你可能感兴趣的:(html/css)