概念

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. JavaScript平台Platypi悄然登场

    几个月前,一个新的JavaScript平台Platypi悄然诞生.它为开发者提供的不仅仅是一套标准的MVC框架而已,由于它是基于TypeScript构建的,因此对开发者而言在熟悉之中透露出与众不同的感 ...

  2. http相关文章目录

    四种常见的 POST 提交数据方式  https://imququ.com/post/four-ways-to-post-data-in-http.html

  3. 双网卡（一外一内）都启用，将内网卡默认网关去除即可正常连接Internet

  4. Jenkins添加项目说明，增加项目描述

    背景:往往正常Jenkins上呈现的内容,太过简短,不易直观看了解项目是干嘛的,如下面的内容: 解决方案,使用插件,Extra Columns Plugin 安装成功后配置,需要结合自定义视图使用,新 ...

  5. IIS/IIS Express中遇到的证书问题

    上面这幅图大家应该不陌生(觉得陌生的话就不用看下面的内容了,呵呵),再放上中英两段关键字: 根据验证过程,远程证书无效. The remote certificate is invalid accor ...

  6. log4net为什么会打印两次？

    用“log4net 使用”做关键字在bing上搜索,点开排序第一的链接:http://33liuhongwei33.blog.163.com/blog/static/39923778201156101 ...

  7. EasyHook实用指南

    所谓实用指南就是全是干货,没那么多虚头巴脑的东西,真正要用的人会发现对自己有用的东西,浅尝辄止的人看起来会不知所云. FileMon自己实做的过程中遇到的问题: 1. exe和dll文件必须强命名,对 ...

  8. Ubuntu搜狗输入法无法输入中文等问题

    Linux版本的搜狗输入法经常崩溃,无法输入中文,今天作下记录,环境:Ubuntu14.04 64位 1.安装和卸载 Linux搜狗是基于框架fcitx的,先得安装框架Ubunt安装搜狗方法 也可以直 ...

  9. mysql随机字符串函数

    drop function if exists rand_str; delimiter $$ ) charset 'utf8' begin # 定义接收初始化类型 ) ; # 定义初始化数字 ) '; ...

  10. C# 命名空间与语句

    C#采用命名空间(namespace)来组织程序.命名空间可以嵌套.using指示符可以用来简化命名空间类型的引用.using指示符有两种用法."using System;"语句可 ...