css 滤镜 如下图:
1、blur([radius]px)
—给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊,默认是0。
2、grayscale(%/number)
—将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
3、brightness(%/number)
—给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。
4、contrast(%/number)
—调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。
5、saturate(%/number)
—转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。
6、hue-rotate(deg)
—给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
7、invert(%/number)
—反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。
8、drop-shadow
(水平偏移,垂直偏移,模糊度,扩张度,颜色)—给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。"inset"关键字是不允许的。
9、opacity(%)
—转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。
10、url()
—URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。例如:filter: url(svg-url#element-id)
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.ranse-filter{
margin:20px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
}
.ranse-filter-box{
margin:10px;
}
.ranse-filter-box img {
width:300px;
}
.blur{
filter: blur(2px);
}
.grayscale{
filter: grayscale(80%);
}
.brightness{
filter: brightness(1.5)
}
.contrast{
filter: contrast(2.4);
}
.saturate{
filter: saturate(3.6);
}
.hue-rotate{
filter: hue-rotate(185deg);
}
.invert{
filter: invert(1);
}
.drop-shadow{
filter: drop-shadow(0px 0px 5px #000);
}
.opacity{
filter: opacity(55%);
}
.sepia{
filter: sepia(0.77);
}
</style>
<title>css滤镜</title>
</head>
<body>
<p>css滤镜详解</p>
<div class="ranse-filter">
<div class="ranse-filter-box">
<p>无滤镜:filter:none</p>
<img src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>高斯模糊:filter:blur(2px)</p>
<img class="blur" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>灰度:filter:grayscale(80%)</p>
<img class="grayscale" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>亮度:filter:brightness(1.5)</p>
<img class="brightness" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>对比度:filter:contrast(2.4)</p>
<img class="contrast" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>饱和度:filter:saturate(2.4)</p>
<img class="saturate" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>色相旋转:filter:hue-rotate(185deg)</p>
<img class="hue-rotate" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>反色:filter: invert(1);</p>
<img class="invert" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>阴影:filter: drop-shadow(0px 0px 5px #000);</p>
<img class="drop-shadow" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>透明度:filter: opacity(55%);</p>
<img class="opacity" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>褐色:filter: sepia(0.77);</p>
<img class="sepia" src="qingqing.jpg" alt="滤镜" />
</div>
</div>
</body>
</html>
css 混合模式如下图:
css混合模式可选值详解
基础混合模式 (normal) – 利用图层透明度和不透明度来控制与下面的图层混合
normal--正常模式--混合色的像素会透过所用的颜色显示出来--没有任何混合模式效果
降暗混合模式 (darken,multiply,color-burn) – 减色模式,滤掉图像中高亮色,从而达到图像变暗
multiply--正片叠底模式--在“正片叠底”模式中,查看每个通道中的颜色信息,并将“基色”与“混合色”复合。--由此产生的结果色将变暗,或者以背景色呈现。当背景为黑色时,结果为黑色,背景为白色时,将保留源效果。
darken--变暗模式--在“变暗”模式中,查看每个通道中的颜色信息,并选择“基色”或“混合色”中较暗的颜色作为“结果色”。--源颜色的暗色部分将被背景色替换,源颜色亮色部分将保持不变。
color-burn--颜色加深模式--在“颜色加深”模式中,查看每个通道中的颜色信息,并通过增加对比度使基色变暗以反映混合色,如果与白色混合的话将不会产生变化。--与color-dodge混合模式相反,通过加暗背景颜色,以突出源颜色。此模式与白色绘画配合不会产生任何效果。
加亮混合模式 (screen,lighten,color-dodge) – 加色模式,滤掉图像中暗色,从而达到图像变亮
screen--滤色模式--“滤色”模式与“正片叠底”模式正好相反,它将图像的“基色”颜色与“混合色”颜色结合起来产生比两种颜色都浅的第三种颜色--结果色总是比源或背景色更亮。当背景色为黑色时,源不变;反之,当背景色为白色时,源将变成白色。其效果如同投射多个摄影幻灯片到一个单一的屏幕上。
lighten--变亮模式--在“变亮”模式中,查看每个通道中的颜色信息,并选择“基色”或“混合色”中较亮的颜色作为“结果色”。--源颜色的亮色部分将被背景色替换,其暗色部分将保持不变。
color-dodge--颜色减淡模式--在“颜色减淡”模式中,查看每个通道中的颜色信息,并通过减小对比度使基色变亮以反映混合色。与黑色混合则不发生变化。--加亮背景颜色,以突出源颜色。此模式与黑色绘画(源)配合不会产生任何效果.
融合混合模式 (overlay,soft-light,hard-light) – 用于不同程度的对上、下两图层的融合
overlay--叠加模式--“叠加”模式把图像的“基色”颜色与“混合色”颜色相混合产生一种中间色。--源与背景色叠加并不会改变其亮度。背景色也不会被取代,但与源混合,将反应背景的亮度或暗度。如果背景色为亮色,效果更接近screen混合模式效果,如果背景色为暗色,效果更接近multiply混合模式效果。
soft-light--柔光模式--柔光”模式会产生一种柔光照射的效果。如果“混合色”颜色比“基色颜色的像素更亮一些,那么“结果色”将更亮;如果“混合色”颜色比“基色”颜色的像素更暗一些,那么“结果色”颜色将更暗,使图像的亮度反差增大。--在较暗的颜色上使用darken模式,而在较亮的颜色上使用lighten,这主要取决于源色彩值。其效果是相似的背景下闪耀着扩散的聚光灯。
hard-light--强光模式--“强光”模式将产生一种强光照射的效果。如果“混合色”颜色“基色”颜色的像素更亮一些,那么“结果色”颜色将更亮;如果“混合色”颜色比“基色”颜色的像素更暗一些,那么“结果色”将更暗。--它在较浅的像素上使用multiply模式,而在较深的像素上使用screen模式,主要取决于源色彩值。如同聚光灯强照在上面。
变异混合模式 (difference,exclusion) – 用于制作各种变异的图层混合
difference--差值模式--在“差值”模式中,查看每个通道中的颜色信息,“差值”模式是将从图像中“基色”颜色的亮度值减去“混合色”颜色的亮度值,如果结果为负,则取正值,产生反相效果。--从亮度值中减去两个混合色中暗度值,得出的混合效果,如果背景色为白色,源混合之后的效果类似于相机底片效果;而背景色为黑色,源混合之后的效果无任何变化。
exclusion--排除模式--“排除”模式与“差值”模式相似,但是具有高对比度和低饱和度的特点。比用“差值”模式获得的颜色要柔和、更明亮一些。--与difference混合模式类似,但产生更柔和的结果色。
色彩叠加混合模式 (hue,saturation,color,luminosity) – 根据图层的色相,饱和度等基本属性,完成图层融合
hue--色相模式--“色相”模式只用“混合色”颜色的色相值进行着色,而使饱和度和亮度值保持不变。--混合色”颜色的色相值进行着色,而使饱和度和亮度值保持不变。
saturation--饱和度模式--“饱和度”模式的作用方式与“色相”模式相似,它只用“混合色”颜色的饱和度值进行着色,而使色相值和亮度值保持不变。--与hue模式类似,“混合色”颜色的饱和度值进行着色,而使色相值和亮度值保持不变。
color--颜色模式--颜色”模式能够使用“混合色”颜色的饱和度值和色相值同时进行着色,而使“基色”颜色的亮度值保持不变。“颜色”模式模式可以看成是“饱合度”模式和“色相”模式的综合效果。--将源颜色的色相和饱和度与背景颜色亮度一起计算得出一个新的颜色。并且保留背景灰度值,给单色图像上色或彩色图像着色很有用。
luminosity--亮度模式--“亮度”模式能够使用“混合色”颜色的亮度值进行着色,而保持“基色”颜色的饱和度和色相数值不变。其实就是用“基色”中的“色相”和“饱和度”以及“混合色”的亮度创建“结果色”。--通过源颜色的亮色和背景颜色的色相、饱和度创建一个新的结果色。
isolation属性
这个属性主要用来设置源是否与其他元素隔离
isolation: auto | isolate
css混合模式 – background-blend-mode 可选值与mix-blend-mode是一样的
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.ranse-filter{
margin:20px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
}
.ranse-filter-box{
margin:10px;
border:1px solid #000;
background: hsl(258, 100%, 50%);
}
.ranse-filter-box p{
padding:0 10px;
height:40px;
margin:0;
line-height: 40px;
background:#fff;
word-break: break-all;
}
.ranse-filter-box img {
width:300px;
display: block;
}
.normal{
mix-blend-mode: normal;
}
.multiply{
mix-blend-mode: multiply;
}
.screen{
mix-blend-mode: screen;
}
.overlay{
mix-blend-mode: overlay;
}
.darken{
mix-blend-mode: darken;
}
.lighten{
mix-blend-mode: lighten;
}
.color-dodge{
mix-blend-mode: color-dodge;
}
.color-burn{
mix-blend-mode: color-burn;
}
.hard-light{
mix-blend-mode: hard-light;
}
.soft-light{
mix-blend-mode: soft-light;
}
.difference{
mix-blend-mode: difference;
}
.exclusion{
mix-blend-mode: exclusion;
}
.hue{
mix-blend-mode: hue;
}
.saturation{
mix-blend-mode: saturation;
}
.color{
mix-blend-mode: color;
}
.luminosity{
mix-blend-mode: luminosity;
}
.ranse-back-box{
width:300px;
height:209px;
margin:10px;
}
.rbbbox{
width: 300px;
height:169px;
background: url(qingqing.jpg) no-repeat,hsl(335, 100%, 50%);
background-size: 100% 100%;
}
.bnormal{
background-blend-mode: normal;
}
.bmultiply{
background-blend-mode: multiply;
}
.bscreen{
background-blend-mode: screen;
}
.boverlay{
background-blend-mode: overlay;
}
.bdarken{
background-blend-mode: darken;
}
.blighten{
background-blend-mode: lighten;
}
.bcolor-dodge{
background-blend-mode: color-dodge;
}
.bcolor-burn{
background-blend-mode: color-burn;
}
.bhard-light{
background-blend-mode: hard-light;
}
.bsoft-light{
background-blend-mode: soft-light;
}
.bdifference{
background-blend-mode: difference;
}
.bexclusion{
background-blend-mode: exclusion;
}
.bhue{
background-blend-mode: hue;
}
.bsaturation{
background-blend-mode: saturation;
}
.bcolor{
background-blend-mode: color;
}
.bluminosity{
background-blend-mode: luminosity;
}
</style>
<title>css混合模式</title>
</head>
<body>
<p>css混合模式-mix-blend-mode-源与背景颜色或背景图像混合</p>
<div class="ranse-filter">
<div class="ranse-filter-box">
<p>正常模式(normal)</p>
<img class="normal" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>正片叠底模式(multiply)</p>
<img class="multiply" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>滤色模式(screen)</p>
<img class="screen" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>叠加模式(overlay)</p>
<img class="overlay" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>变暗模式(darken)</p>
<img class="darken" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>变亮模式(lighten)</p>
<img class="lighten" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>颜色减淡模式(color-dodge)</p>
<img class="color-dodge" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>颜色加深模式(color-burn)</p>
<img class="color-burn" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>强光模式(hard-light)</p>
<img class="hard-light" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>柔光模式(soft-light)</p>
<img class="soft-light" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>差值模式(difference)</p>
<img class="difference" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>排除模式(exclusion)</p>
<img class="exclusion" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>色相模式(hue)</p>
<img class="hue" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>饱和度模式(saturation)</p>
<img class="saturation" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>颜色模式(color)</p>
<img class="color" src="qingqing.jpg" alt="滤镜" />
</div>
<div class="ranse-filter-box">
<p>亮度模式(luminosity)</p>
<img class="luminosity" src="qingqing.jpg" alt="滤镜" />
</div>
</div>
<p>css混合模式-background-blend-mode-元素背景层的混合模式</p>
<div class="ranse-filter">
<div class="ranse-back-box">
<p>正常模式(normal)</p>
<div class="rbbbox bnormal">
</div>
</div>
<div class="ranse-back-box">
<p>正片叠底模式(multiply)</p>
<div class="rbbbox bmultiply">
</div>
</div>
<div class="ranse-back-box">
<p>滤色模式(screen)</p>
<div class="rbbbox bscreen">
</div>
</div>
<div class="ranse-back-box">
<p>叠加模式(overlay)</p>
<div class="rbbbox boverlay">
</div>
</div>
<div class="ranse-back-box">
<p>变暗模式(darken)</p>
<div class="rbbbox bdarken">
</div>
</div>
<div class="ranse-back-box">
<p>变亮模式(lighten)</p>
<div class="rbbbox blighten">
</div>
</div>
<div class="ranse-back-box">
<p>颜色减淡模式(color-dodge)</p>
<div class="rbbbox bcolor-dodge">
</div>
</div>
<div class="ranse-back-box">
<p>颜色加深模式(color-burn)</p>
<div class="rbbbox bcolor-burn">
</div>
</div>
<div class="ranse-back-box">
<p>强光模式(hard-light)</p>
<div class="rbbbox bhard-light">
</div>
</div>
<div class="ranse-back-box">
<p>柔光模式(soft-light)</p>
<div class="rbbbox bsoft-light">
</div>
</div>
<div class="ranse-back-box">
<p>差值模式(difference)</p>
<div class="rbbbox bdifference">
</div>
</div>
<div class="ranse-back-box">
<p>排除模式(exclusion)</p>
<div class="rbbbox bexclusion">
</div>
</div>
<div class="ranse-back-box">
<p>色相模式(hue)</p>
<div class="rbbbox bhue">
</div>
</div>
<div class="ranse-back-box">
<p>饱和度模式(saturation)</p>
<div class="rbbbox bsaturation">
</div>
</div>
<div class="ranse-back-box">
<p>颜色模式(color)</p>
<div class="rbbbox bcolor">
</div>
</div>
<div class="ranse-back-box">
<p>亮度模式(luminosity)</p>
<div class="rbbbox bluminosity">
</div>
</div>
</div>
</body>
</html>
HLS颜色值
H—色调
1、红色设置为0度,绿色是120度,蓝色是240度。它们将色盘分为三个部分。
2、在它们的中间分别是黄色、青色和洋红(CMYK颜色系统)。它们的角度分别为60度、180度和300度。
3、从色盘的顶部开始顺时针方向旋转,是彩虹的七彩颜色。从60度开始,分别是:黄色、绿色、青色、蓝色、洋红和红色
S—饱和度值(颜色的“强度”)
1、在色盘的最外层,颜色的饱和度为100%,最外层的颜色是最有“色彩”的。
2、色盘越往中心移动颜色越灰。所以饱和度也可以理解为:颜色距离灰色有多远?HSL颜色的饱和度为0%时就都变为相同的灰色。
L—亮度(颜色偏向于白色还是黑色)
1、50%的亮度值表示颜色位于黑色和白色中间,这时颜色会基本保持原来的颜色不变。
2、减少亮度会增加黑色调:当亮度为0%时颜色变为黑色。
3、增加亮度会增加白色调:当亮度值为100%时颜色变为白色。