概念

CSS3混合模式（  CSS Blend Modes  ）是CSS3新增的一个魔法特性，可以允许多个背景或多个元素进行混合，类似于Photoshop的图层混合模式

CSS3混合模式属性一览

background-blend-mode

background-blend-mode ： <blend-mode>

设置多背景之间的混合模式，背景色、背景图像、渐变背景之间的混合模式。

<blend-mode>可以接受16个取值，分别为：normal | multiply | screen | overlay | darken | lighten |color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity如下图

mix-blend-mode

mix-blend-mode：<blend-mode>

  • 设置多元素之间的混合模式。
  • html元素之间、html与svg元素之间均可

isolation

isolation：auto | isolate

  • 设置元素的隔离模式

下载Demo

CSS3---混合模式的更多相关文章

  1. 神奇的CSS3混合模式

    神奇的css3混合模式 对于前端开发人员应该都很熟悉Photoshop的图层混合模式,就是几个图层按不同的模式进行混合,实现不同的图像效果.但是当我们前端同学在切这些效果图的时候,基本上就是一刀切的, ...

  2. CSS3混合模式mix-blend-mode/background-blend-mode简介 ，PS中叠加效果

    一.CSS3 mix-blend-mode 首先,要知道”blend-mode”就是混合模式的意思.那mix, 恩,我也不知道为什么命名为mix, 可能是该属性不仅可以作用于HTML,还可以作用于SV ...

  3. [转] CSS3混合模式mix-blend-mode/background-blend-mode简介 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4819 一.关于混合模 ...

  4. css3 混合模式mix-blend-mode background-blend-mode 以及混合模式的隔断 isolation

    css 混合模式 mix-blend-mode: 让 元素内容 和 这个元素 以及 下面的元素 发生混合 background-blend-mode 背景的混合模式 可以是背景图片的混合也可以是背景图 ...

  5. CSS3混合模式background-blend-mode

    注意:background属性中的背景图片和颜色混合,只能在一个background属性中. 属性值: background-blend-mode: normal; //正常 background-b ...

  6. css3混合模式

    https://juejin.im/entry/5b4802d15188251ac446d3a9

  7. CSS3基础(4)——CSS3 渲染属性

    一. CSS3 计数器详解    CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...

  8. css mix-blend-mode 混合模式

    CSS3混合模式种类 在CSS3混合模式中,目前仅有16种:normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,h ...

  9. css mix-blend-mode 颜色滤镜混合模式

    CSS3混合模式种类 在CSS3混合模式中,目前仅有16种:normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,h ...

  10. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

随机推荐

  1. android ContentProvider共享数据

    ContentProvider共享数据 ContentProvider对外共享数据需要: 1.定义一个ContentProvider类,需要继承android的ContentProvider基类 2. ...

  2. layui文档阅读进度

    2017年1月9日22:13:28已看完layer弹出层部分 2017年1月9日19:15:55http://www.layui.com/doc/modules/layer.html#layer.lo ...

  3. python-rrdtool

    https://nagios-plugins.org/doc/guidelines.html nagios检测信息 host GPING OK – rtt min/avg/max/mdev = 0.8 ...

  4. php的yii框架开发总结1

    最近用php的yii框架写了一个小的demo,虽然不复杂,但是也学习了很多东西,现在总结一下. 项目需求:为几个教研室写一个日报系统,每个人每天写日报,并且系统有自动实现发邮件功能. 额外要求:1.人 ...

  5. Microsoft EDP（enterprise database protection）配置策略中的三种Rule template

    搭建Microsoft EDP环境: Microsoft 10 insider preview,Microsoft Intune,ie10(要安装插件silverlight) 这里暂时只说在进行配置策 ...

  6. failed: No module named 'catkin_pkg' Make sure that you have installed "catkin_pkg"

    https://stackoverflow.com/questions/43024337/why-this-error-when-i-try-to-create-workspaces-in-ros# ...

  7. EF写INNER JOIN 链接

    面对多表的查询,一般都是多表连接后下面再写条件,但是有一种写法可以提升一下EF生成的语句的效率 首先先去查询每一个表,把每一个表对应的条件附加上去,注意:过滤数据最多的条件放在首先位置 var lt ...

  8. 画X，模拟水题

    题目链接:http://codeforces.com/contest/404/problem/A #include <stdio.h> #include <string.h> ...

  9. Poj(2488)，按照字典序深搜

    题目链接:http://poj.org/problem?id=2488 思路:按照一定的字典序深搜,当时我的想法是把所有的可行的路径都找出来,然后字典序排序. 后来,凡哥说可以在搜索路径的时候就按照字 ...

  10. centos6.5下编译安装FFmpeg

    以下安装步骤基本来自官网,做个笔记以方便自己以后查看 http://trac.ffmpeg.org/wiki/CompilationGuide 1.安装依赖包 <span style=" ...