关闭

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

标签: css3背景混合
492人阅读 评论(0) 收藏 举报
分类:

起初想找一个算法来寻找颜色对应的对比色,以在不确定文字颜色的情况下设置其背景色,这样不至于出现颜色重合或者差别不大的情况。
然后找到了这篇文章,其中介绍了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
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

CSS3新特性: mix-blend-mode: multiply

我经常问的一个面试题是: “在前端领域,你如何与新技术和API保持同步更新?“ 我听到的大多都是标准答案: “技术博客” 以及 “RSS订阅”, 而很少听到 “关注大牛的Twitter“ 这类答案, ...
  • renfufei
  • renfufei
  • 2016-05-02 15:46
  • 6011

mix-blend-mode无效?你需要注意以下内容

mix-blend-mode无效?你需要注意以下内容
  • w20101310
  • w20101310
  • 2017-11-14 11:16
  • 108

不可思议的混合模式 background-blend-mode

(点击上方公众号,可快速关注)作者:伯乐在线/chokcocohttp://web.jobbole.com/93479/本文接前文:不可思议的混合模式 mix-blend-mode 。由于 mix-b...
  • VhWfR2u02Q
  • VhWfR2u02Q
  • 2017-12-28 00:00
  • 63

不可思议的混合模式 background-blend-mode

本文接前文:不可思议的混合模式 mix-blend-mode 。由于 mix-blend-mode 这个属性的强大,很多应用场景和动效的制作不断完善和被发掘出来,遂另起一文继续介绍一些使用 mix-b...
  • qq_36510261
  • qq_36510261
  • 2017-12-28 15:26
  • 42

PS中图层混合模式的Blend公式

自己的总结:(伪代码+注释) // 混合模式的代入式:// 颜色的数据类型,里头分另有(RGBA/XYZW)的分量组合在, // 与单个标量的运算时:未指定分量运算时 // 默认是 float...
  • linjf520
  • linjf520
  • 2016-04-07 15:21
  • 2579

Html Css/css3兼容性总结(兼容主流浏览器包括Ie6)

1. 360以极速模式打开网页: 默认用急速内核,增加标签:   默认用ie兼容内核,增加标签: 默认用ie标准内核,增加标签: 2. CSS3选择器 :nth-child(2n)兼容性 解决:...
  • cddcj
  • cddcj
  • 2016-08-04 17:20
  • 617

Blend Modes——混合模式

This example shows how to change the canvas compositing / blending mode in post- and precompose even...
  • SmileCoffin
  • SmileCoffin
  • 2017-06-28 10:49
  • 263

BlendMode颜色混合模式枚举值

BlendMode参数值及表现形式 blendMode作用 在对图片进行手动处理的时候,可能用到图层混合,如改变图片的颜色。常常获取CGContext,然后设置其blendMode参数。 为了形象理解...
  • qq_14920635
  • qq_14920635
  • 2017-07-21 11:52
  • 636

css3兼容IE8的方案 各个ie的hack

虽然现在很多项目已经对低版本IE不要求了,但是还有部分公司对IE8还是很执着的,咱作为屌丝前端程序员不能和老板说前端潮流,不能说趋势,只能动脑子了,下面就分享一些css3兼容ie8的方案思路。主要是实...
  • maoguiyou
  • maoguiyou
  • 2016-03-03 10:05
  • 6218

让IE6/IE7/IE8支持CSS3的8种方法

我们都知道,IE浏览器暂不支持CSS3的一些属性。国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的...
  • debugingstudy
  • debugingstudy
  • 2013-09-23 02:16
  • 27877
    个人资料
    • 访问:457364次
    • 积分:5223
    • 等级:
    • 排名:第6124名
    • 原创:178篇
    • 转载:22篇
    • 译文:1篇
    • 评论:46条
    最新评论