概念

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. 一、Dapper基本操作

    参考资料:Cooper Liu 毒逆天 一.Dapper安装 添加引用-->NuGet管理-->搜索Dapper-->安装 二.新建表 --创建一个员工表 create table ...

  2. Javascript基础--数据类型

    一.基本数据类型 1.字符类型:表示字符的类型,例:'aaa',"aaaa",'123456',''(空字符) 2.数字类型:表示数字的类型,例:0,1,3.1415936等 特殊 ...

  3. 阻塞IO, 非阻塞IO, 同步IO,异步IO

    阻塞IO, 非阻塞IO, 同步IO,异步IO 介绍 先说明几个概念 用户空间与内核空间 为了保证用户进程不能直接操作内核(kernel),保证内核的安全,操心系统将虚拟空间(内存)划分为两部分,一部分 ...

  4. win10 安装mysql zip 压缩包版

    从官网下载zip https://www.mysql.com/downloads/ 解压 D:\devtool\mysql-5.7.17-winx64\ 将  D:\devtool\mysql--wi ...

  5. maven下nutz与servlet报错org.nutz.mvc.NutFilter cannot be cast to javax.servlet.Filter

    使用maven搭建nutz时,加入servlet报错:org.nutz.mvc.NutFilter cannot be cast to javax.servlet.Filter 十二月 03, 201 ...

  6. lucene的使用与优化

    1 lucene简介1.1 什么是luceneLucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是提供了一种工 ...

  7. simotion byte/word ASCII码转换为字符、字符串

    建立string类型,和byte类型(ASCII)的数据 将byte类型(ASCII)赋值给string中的一个字符 参考程序 VAR_GLOBAL myword :WORD; mystring :S ...

  8. 支持多域名的免费SSL证书

    知乎网友称其支持多域名: https://www.zhihu.com/question/19578422 配置教程: https://www.cnblogs.com/duanweishi/p/8483 ...

  9. 【LOJ6043】「雅礼集训 2017 Day7」蛐蛐国的修墙方案（搜索技巧题）

    点此看题面 大致题意: 给你一个长度为\(n\)的排列\(p\),要求构造一个合法的括号序列,使得如果第\(i\)个位置是左括号,则第\(p_i\)个位置一定是右括号. 暴搜 很容易想出一个暴搜. 即 ...

  10. NYOJ(325)+NYOJ(456),01背包

    题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=325 http://acm.nyist.net/JudgeOnline/problem. ...