注意:background属性中的背景图片和颜色混合,只能在一个background属性中。

属性值:

background-blend-mode: normal;          //正常
background-blend-mode: multiply; //正片叠底
background-blend-mode: screen; //滤色
background-blend-mode: overlay; //叠加
background-blend-mode: darken; //变暗
background-blend-mode: lighten; //变亮
background-blend-mode: color-dodge; //颜色减淡
background-blend-mode: color-burn; //颜色加深
background-blend-mode: hard-light; //强光
background-blend-mode: soft-light; //柔光
background-blend-mode: difference; //差值
background-blend-mode: exclusion; //排除
background-blend-mode: hue; //色相
background-blend-mode: saturation; //饱和度
background-blend-mode: color; //颜色
background-blend-mode: luminosity; //亮度 background-blend-mode: initial; //初始
background-blend-mode: inherit; //继承
background-blend-mode: unset; //复原

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

  1. 神奇的CSS3混合模式

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

  2. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  3. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

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

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

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

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

  6. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  7. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

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

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

  9. CSS背景和CSS3背景background属性

    css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

随机推荐

  1. java 1.7

    http://superuser.com/questions/740064/how-to-install-java-1-7-runtime-on-macos-10-9-mavericks sudo r ...

  2. RFM

    前面博客中讲到的聚类,聚类是对客户的一些特征进行分群,属于描述,不涉及客户价值的判断,然而在营销中,其实第一步应该是搞清楚谁才是你的关键客户,哪些用户的价值较高,这就需要用到RFM模型.RFM模型是众 ...

  3. 元素间距属性(scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin)

    scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...

  4. CSS3圆角边框的使用-遁地龙卷风

    0.快速入门 border-radius:50px; 1.border-radius详解 border-radius:50px; 上右下左,水平和垂直距离都是50px border-radius:50 ...

  5. Laravel的生命周期

    当你使用一个工具的时候, 如果你对这个工具的内部原理和构造有所了解, 那么在使用这个工具的时候, 就会更加的有信心, 工具用起来也会更加的得心应手. 今天阅读了 Laravel 官方的生命周期文档.这 ...

  6. C#构造方法重载

    1.什么是构造方法? 首先,它是一个方法,它是类中 众多方法中的一个.其次,它具有类中其他方法所不具备的一些特性. 在类执行开始的时候,执行这个方法. 2.构造方法相对其他方法有哪些不同? 方法名:类 ...

  7. javascript,检测对象中是否存在某个属性

    检测对象中属性的存在与否可以通过几种方法来判断. 1.使用in关键字. 该方法可以判断对象的自有属性和继承来的属性是否存在. var o={x:1}; "x" in o; //tr ...

  8. BZOJ 1068: [SCOI2007]压缩

    Sol 区间DP.这个区间DP需要三维, \(f[i][j][k]\) 表示\([i,j]\) 这个区间中是否存在 \(M\) . 转移有两种,一种是这个区间存在 \(M\) ,那么直接枚举 \(M\ ...

  9. Apple WatchKit 初探

    首先新建一个普通project即可. 然后添加WatchKit, file->new->target 直接NEXT后就能见到APPLE WATCH的编辑界面了. 因为apple watch ...

  10. 解决maven项目移动

    解决使用maven的工程移动到另一台电脑(电脑无法访问maven中央仓库问题) 移动后出现下述结果: Publishing failedPublishing failed with multiple ...