概念

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. Linux读取NTFS类型数据盘

    Windows的文件系统通常使用NTFS或者FAT32格式,而Linux的文件系统格式通常是EXT系列,请参考下面方法: 1) 在Linux系统上使用以下命令安装ntfsprogs软件使得Linux能 ...

  2. 源码安装zabbix3.2.7时PHP ldap Warning

    问题如下: 解决方法: 1.首先查看源码安装的php模块中是否有ldap.so [root@nms ldap]# ll  /usr/local/php/lib/php/extensions/no-de ...

  3. 94. Binary Tree Inorder Traversal(inorder ) ***(to be continue)easy

    Given a binary tree, return the inorder traversal of its nodes' values. Example: Input: [1,null,2,3] ...

  4. QT创建与调用Dll方法（包括类成员）--显式调用

    看网上的好多关于QT调用Dll的方法,大部分都是调用函数的,并没有调用C++类成员的情况,即使是有,比如说: 使用Qt编写模块化插件式应用程序 Qt 一步一步实现dll调用(附源码)---(这一篇里没 ...

  5. python对表格的使用

    #!user/bin/env python # coding=utf- import xlrd def readExcelDataByName(filename, sheetName): '''读取E ...

  6. JS中的var、let、const

    1.var 在全局window中申明则为全局变量,是全局对象 window 的属性. var sum = 0 console.log(window.sum) console.log(sum); 在函数 ...

  7. element el-tooltip 内容换行的方法

    <el-tooltip class="item" effect="light" placement="top-start">  ...

  8. C#把日期转化成星期

    显示效果:       *****      前台页面代码: <TextBlock Grid.Row="/> <TextBlock Grid.Row="/> ...

  9. 基于PHP的微信公众平台开发（TOKEN验证，消息回复）

    微信公众平台开发 实现步骤: 第一步:填写服务器配置 登录微信公众平台官网后,在公众平台后台管理页面 - 开发者中心页,点击“修改配置”按钮,填写服务器地址(URL).Token和EncodingAE ...

  10. python导包学习总结

    python初学者,对于导包纠结了不少时间,总结分享,持续前进~ Python导包的两种方法: 1.1  from 包.模块  import 方法名,调用时直接使用方法名() 1.2  from 包. ...