[CSS 混合模式]——mix-blend-mode/background-blend-mode简介

mix-blend-mode/background-blend-mode

CSS3真是有很多的神奇的地方,这个两个元素你知道吗?

这是张大大拿过来的图,关于混合模式,借图一用。

mix-blend-mode

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

mix-blend-mode: initial;         //初始
mix-blend-mode: inherit;         //继承
mix-blend-mode: unset;           //复原

举个例子,自行去玩耍

CSS3 background-blend-mode

background-blend-mode这个要更好理解一点,背景的混合模式。可以是背景图片见的混合,也可以是背景图片和背景色的混合。

需要注意的是,只能是background属性中的背景图片和颜色混合,而且只能在一个background属性中。

CSS3 backgrounds多背景IE9+浏览器就开始支持了。因此,你想混合多图,就是要逗号,一个一个写在background属性中就可以了,

.box {
    background: url(mm1.jpg) no-repeat center, url(mm2.jpg) no-repeat center;    background-blend-mode: color;
}

说明:

原文链接:http://www.zhangxinxu.com/wordpress/2015/05/css3-mix-blend-mode-background-blend-mode/

用这个两个属性可以做出很多效果出来。

				
时间: 2024-10-14 05:54:02

[CSS 混合模式]——mix-blend-mode/background-blend-mode简介的相关文章

CSS混合模式

层叠上下文z-index只是解决两个元素覆盖,谁离用户更近的问题.而CSS混合模式,则是处理两个元素覆盖部分如何混合的问题.如果了解photoshop的话,对这种现象应该不陌生.CSS3有两个与混合模式相关的属性:mix-blend-mode和background-blend-mode,本文将详细介绍CSS混合模式 元素混合 元素混合mix-blend-mode应用于两个元素之间的混合 mix-blend-mode 初始值: normal 应用于: 所有元素 继承性: 无 值: normal(正

探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性: { transform-style: preserve-3d; perspective: 1000; transform: translate3d(); } 这个 Demo 你可以戳这里,大概是这样:CodePen Demo - 3D ball: 嗯,大概到了这个效果,想到了 CSS 混合模式 mix-blend-mode,寻思着,利用混合模式,是否能让效果更上一层楼或者碰撞出一些

CSS border三角、圆角图形生成技术简介

http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题,我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理,以及实例.我觉得此技术相当实用的,故本文再次简单叙述一下,另外,本文还将展示可能并不为众人所知的CSS border圆角生成技术.好了,裹脚布的话就不说了,直接进入正题. 二.CSS bord

浅谈css样式(border、background、table)

border用法 border:边框.属性有:border-width,border-style,border-color. 1 <div id="d1"> 2 高度200,宽带200,边框颜色为红色的边框. 3 </div> 1 #d1{ 2 width:200px; 3 height:200px; 4 border:1px solid red; 5 } border-width:表示边框的粗细.border-style:边框样式.solid实线.dashed

CSS 和 CSS3 中的 background

background 现在对 background 属性做总结 background-color: gray;                          背景颜色 background-image: url(/i/eg_bg_04.gif);  背景图片 background-repeat: repeat-y;                 背景图重复 这个属性值有三个:  no-repeat/ repeat-x/ repeat-y  即不重复/ x轴重复/ y轴重复 backgrou

css背景图片位置:background的position(转)

position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.background:url(../image/header.jpg) no-repeat left top;  /*相当于0%  0%*/表示背景图片在指定div的位置,从左上角开始 2.background:url(../image/header.jpg) no-repeat right bottom;  /*相当于100%   100%*/表示背景图片从指定div的右下角开

CSS box-flex属性,然后弹性盒子模型简介

一.here we go 看到大神写的关于box-flex的介绍,忍不住收了,大神介绍的很详细,新技能get! 二.box-flex属性(和谐版) 有道桌面词典显示,"flex"一词中文有"收缩"之意.不过,从此属性实际上产生的效果来看,无论怎样用"收缩"一词解释都显得很牵强.所以,这 里,直接抛开字面意思,我们可以将"box-flex"理解为"房子-分配".box为"盒子"的意思,我们

Atitit blend mode COLOR_DODGE&#160;混合模式&#160;&#160;“颜色减淡”模式

Atitit blend mode COLOR_DODGE 混合模式  "颜色减淡"模式 1.1. 混合模式是图像处理技术中的一个技术名词1 1.2. 目录1 1.3. 颜色减淡COLOR_DODGE的公式如下2 1.4. 详细解释及原理3 1.5. 使用javafx 类库实现图像叠加混合3 1.6. 代码实现 /AtiPlatf_cms/src/com/attilax/img/ImageBlendFilter.java4 1.1. 混合模式是图像处理技术中的一个技术名词 ,不仅用于广

iOS 2D绘图 (Quartz2D)之路径(stroke,fill,clip,subpath,blend)

像往常一样 这个系列的博客是跟着大神的脚步来的.按照往例 在此贴出原博客的出处: http://blog.csdn.net/hello_hwc?viewmode=list 我对大神的崇拜之情 如滔滔江水 巴拉巴拉的 ......... 言归正传 Stroke-描边 影响描边的因素 线的宽度-CGContextSetLineWidth 交叉线的处理方式-CGContextSetLineJoin 线顶端的处理方式-CGContextSetLineCap 进一步限制交叉线的处理方式-CGContext