概念

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. 建立本地yum源

    使用环境 服务器处于内网,需要更新 网络资源紧张,节约带宽 建立yum目录 mkdir -p /opt/opmgmt/yum rsync服务器列表 centos mirrors epel mirror ...

  2. seattle language school & on-line degree

    http://www.kaplaninternational.com/ https://asuonline.asu.edu/online-degree-programs/ https://asuonl ...

  3. ubuntu linux 使用命令行安装 google chrome

    原帖地址: https://www.cyberciti.biz/faq/how-to-install-google-chrome-in-ubuntu-linux-12-xx-13-xx/ $ wget ...

  4. An internal error occurred during: "Generating JAX-WS Web Services".Unable to create JAXBContext

    使用myeclipse10 创建webservice时,提示错误: An internal error occurred during: "Generating JAX-WS Web Ser ...

  5. NWERC 2013 - J (codeforces gym - 100405J)

    题目描述:给你一颗二叉树,保证每个点要么是叶子节点,要么有左右两个儿子.某些叶子节点上放着灯,请你移动最少的灯,使得整棵树平衡 对平衡的定义:对于树上的每个点左右儿子中灯数的差的绝对值≤1,那么这棵树 ...

  6. CodeForces 506D Mr. Kitayuta's Colorful Graph

    brute force ? 其实是平方分解.很容易想到的是每一个颜色建一个图,然后并查集维护一下连通性. 问题在于颜色有O(m)种,每种颜色的图点数都是O(n)的,因此并查集的空间只能重复利用. 但是 ...

  7. hdu-2852 KiKi's K-Number---二分+树状数组

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2852 题目大意: 题意:    给出三种操作,    0 在容器中插入一个数.    1 在容器中删 ...

  8. ACM Arabella Collegiate Programming Contest 2015 H. Capital City 边连通分量

    题目链接:http://codeforces.com/gym/100676/attachments 题意: 有 n 个点,m 条边,图中,边强连通分量之间可以直达,即距离为 0 ,找一个点当做首都,其 ...

  9. web的攻击技术

    简单的http协议本身并不存在安全性问题,因此技术本身几乎不会成为攻击的对象,应用http协议的服务器和客户端,以及运行在服务器端web应用等资源才是攻击目标,那么怎么攻击,来源于哪里呢 web应用攻 ...

  10. CentOS 5 - 安装PHP MongoDB扩展

    For driver developers and people interested in the latest bugfixes, you can compile the driver from ...