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

标签: css3 背景 混合
742人阅读 评论(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;
}

效果:
这里写图片描述

查看评论

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

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

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

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

css3 图片颜色叠加--background-blend-mode

先创建一个DIV:div class="mul">div>  给这DIV添加背景颜色和背景图片: .mul{ margin: 0 auto; border: solid 1p...
  • qq_30668579
  • qq_30668579
  • 2016-06-04 14:50:52
  • 2836

css3 mix-blend-mode 混合模式详解

该属性的作用是将一个元素同其父标签的元素发生混合: 混合方式有以下几种: mix-blend-mode: normal;          //正常 mix-blend-mode: multip...
  • qq_36735409
  • qq_36735409
  • 2017-10-16 14:05:51
  • 454

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

起初想找一个算法来寻找颜色对应的对比色,以在不确定文字颜色的情况下设置其背景色,这样不至于出现颜色重合或者差别不大的情况。 然后找到了这篇文章,其中介绍了mix-blend-mode这个属性,很...
  • u014291497
  • u014291497
  • 2017-08-27 16:03:27
  • 742

使用canvas在前端实现图片合成

看着总结的不错,我也就拿来主义了,做个记录,侵权必删图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。随着HTML5发展和现代浏览器的占比越来越高,我们其实也可以在前端...
  • xllily_11
  • xllily_11
  • 2018-02-26 09:56:50
  • 307

解决css3微信斗牛棋牌源码出售毛玻璃效果(blur)有白边问题

做一个登录页,全屏微信斗牛棋牌源码出售 官网:h5.super-mans.com 企娥:2012035031 vx和tel:17061863513 微信斗牛棋牌源码出售背景图毛玻璃效果,实现方法如下:...
  • oschina_41805947
  • oschina_41805947
  • 2018-03-08 10:17:05
  • 43

css3中position定位详解

最近热衷于前端的开发,因为突然发现虽然对于网站、应用来说,功能处于绝对重要的地位,但是用户体验对于用户来讲同样是那么的重要,可以说是第一印象。最近在开发当中发现以前对于css中的position的理解...
  • jiangcs520
  • jiangcs520
  • 2013-11-21 20:53:55
  • 12861

关于移动端滑动卡顿现象的解决方案

-webkit-overflow-scrolling: touch IOS 端特属属性,手指离开屏幕会保持滚动一段距离,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 overflow...
  • tinsine
  • tinsine
  • 2018-03-12 09:49:40
  • 323

CSS 背景图片和背景颜色融合,以及多张背景图片融合显示

写CSS的时候会遇到这样一个需求,要求给背景图片加上一个“遮罩层”,看起来更符合页面的整体风格。 可以用背景图片和背景颜色融合来解决。 通常我们这样写:           .bgDiv { ...
  • dgggbd
  • dgggbd
  • 2017-04-27 13:37:20
  • 1268
    个人资料
    持之以恒
    等级:
    访问量: 57万+
    积分: 6043
    排名: 5234
    最新评论