免费的动态ppt网站,查询成绩的网站怎么做,wordpress本地主机,网页制作流程分为哪几个步骤一#xff1a;简介
在上篇文章中#xff0c;我们利用css的mix-blend-mode属性做了一个简单的文字颜色自适应背景颜色的效果#xff0c;这篇文章我来解释一下这个属性的用法以及一些简单的案例。 二#xff1a;介绍
mix-blend-mode 是一种 CSS 属性#xff0c;它定义了一…一简介
在上篇文章中我们利用css的mix-blend-mode属性做了一个简单的文字颜色自适应背景颜色的效果这篇文章我来解释一下这个属性的用法以及一些简单的案例。 二介绍
mix-blend-mode 是一种 CSS 属性它定义了一个元素的颜色如何与其父元素的颜色以及兄弟元素的颜色混合。它允许您创建令人惊艳的视觉效果可以用于创建半透明效果、添加阴影、制作图片蒙版和很多其他效果。 具体来说mix-blend-mode 定义了两个元素之间的颜色混合模式。该属性接受许多不同的值接下来我会逐个介绍。 normal
默认值。使用正常的颜色混合模式。
multiply
将两个颜色的值相乘得到一个更暗的颜色。这通常用于创建阴影效果。
screen
将两个颜色的值相加然后减去相乘的值得到一个更亮的颜色。这通常用于创建高光效果。
overlay
根据背景颜色的亮度来选择颜色混合模式。如果背景颜色较暗则使用 multiply 模式如果背景颜色较亮则使用 screen 模式。
darken
将两个颜色的值比较使用较暗的那个颜色。
lighten
将两个颜色的值比较使用较亮的那个颜色。
color-dodge
将前景色分解为 RGB 分量并将每个分量分别除以1 减去背景色的对应分量。然后将每个分量限制在 0 到 1 之间并使用限制后的前景色作为混合色。
color-burn
将前景色分解为 RGB 分量并将每个分量分别除以背景色的对应分量。然后将每个分量限制在 0 到 1 之间并使用限制后的前景色作为混合色。
difference
将前景色减去背景色的值并取绝对值。这会导致一个反相的效果。
exclusion
将前景色和背景色的值相加然后减去相乘的值的两倍。这通常用于创建反相效果。
hue
将前景色的色相Hue与背景色的饱和度Saturation和亮度Lightness混合。这可以用于在不改变亮度和饱和度的情况下改变颜色。
saturation
将前景色的饱和度与背景色的色相和亮度混合。这可以用于在不改变颜色的情况下改变饱和度。
color
将前景色的色相、饱和度和亮度与背景色混合。这可以用于在改变所有颜色属性的情况下改变前景色的颜色。
luminosity
将前景色的亮度与背景色的色相和饱和度混合。这可以用于在不改变颜色的情况下改变亮度。
mix-blend-mode
属性可以应用于任何具有背景颜色或背景图像的元素包括文本、图像和 SVG 图形。通常情况下您会将 mix-blend-mode 应用于子元素使其与父元素或其他兄弟元素混合。
三注意
在混合模式中元素的颜色值可以是任何一种表示颜色的方式包括十六进制值、RGB值、RGBA值等。当进行混合计算时CSS会将两个元素的颜色值转换成标准的RGBA表示方式并根据混合模式算法对这两个颜色值进行计算最终生成一个新的RGBA颜色值。
混合模式中的算法涉及到了数学计算不同的算法使用不同的计算公式。以 multiply 算法为例它的计算公式是将两个颜色值的每个通道即红、绿、蓝、透明度四个通道分别相乘得到新的颜色值的每个通道。 rgb(255,255,0)与一个rgb(0,255,0)相加
两个颜色值相加通常是通过混合模式中的color算法实现的。这个算法将两个颜色值的每个通道即红、绿、蓝三个通道进行相加然后将结果截取到最大值255以内得到新的颜色值的每个通道。如果通道相加的结果超过了255则将结果截取到255。因为每个通道的值都在0-255之间所以相加的结果也应该在这个范围内。
因此将rgb(255, 255, 0)与rgb(0, 255, 0)相加的结果为rgb(255, 255, 0)因为红色通道相加为255绿色通道相加为255蓝色通道相加为0符合上述算法。 rgb(255,255,0)与一个rgb(0,255,0)相乘
两个颜色值相乘通常是通过混合模式中的multiply算法实现的。这个算法将两个颜色值的每个通道即红、绿、蓝三个通道进行相乘然后将结果除以255得到新的颜色值的每个通道。如果通道相乘的结果超过了255则将结果除以255后截取到1以内。
因此将rgb(255, 255, 0)与rgb(0, 255, 0)相乘的结果为rgb(0, 255, 0)因为红色通道相乘为0绿色通道相乘为255蓝色通道相乘为0符合上述算法。 四案例
以下用几个简单的例子来用一下比较常用的属性值 1. mix-blend-mode: multiply;
此属性值会将两个图层的颜色值相乘产生一种暗色调的效果。以下是一个简单的例子
.parent {\n background-image: url(\background-image.jpg\);\n background-color: #000000;\n mix-blend-mode: multiply;\n}\n\n.child {\n background-image: url(\foreground-image.png\);\n}\n
这个例子中父元素的背景图和颜色会与子元素的背景图进行相乘产生一种暗色调的效果。 2. mix-blend-mode: screen;
此属性值会将两个图层的颜色值进行屏幕混合产生一种亮色调的效果。以下是一个简单的例子
.parent {\n background-image: url(\background-image.jpg\);\n background-color: #ffffff;\n mix-blend-mode: screen;\n}\n\n.child {\n background-image: url(\foreground-image.png\);\n}\n
这个例子中父元素的背景图和颜色会与子元素的背景图进行屏幕混合产生一种亮色调的效果。 3.mix-blend-mode: overlay;
此属性值会将两个图层进行叠加混合产生一种高亮度的效果。以下是一个简单的例子
.parent {\n background-image: url(\background-image.jpg\);\n background-color: #ffffff;\n mix-blend-mode: overlay;\n}\n\n.child {\n background-image: url(\foreground-image.png\);\n}\n
这个例子中父元素的背景图和颜色会与子元素的背景图进行叠加混合产生一种高亮度的效果。 4.mix-blend-mode: difference;
此属性值会将两个图层的颜色值进行差值计算产生一种反色效果。以下是一个简单的例子
.parent {\n background-image: url(\background-image.jpg\);\n mix-blend-mode: difference;\n}\n\n.child {\n background-image: url(\foreground-image.png\);\n}\n
这个例子中父元素的背景图和子元素的背景图进行差值计算产生一种反色效果。 5.mix-blend-mode: hue;
此属性值会将两个图层的色相进行混合产生一种颜色平衡的效果。以下是一个简单的例子
.parent {\n background-image: url(\background-image.jpg\);\n mix-blend-mode: hue;\n}\n\n.child {\n background-image: url(\foreground-image.png\);\n}\n
这个例子中父元素的背景图和子元素的背景图进行色相混合产生一种颜色平衡的效果。 6.mix-blend-mode: luminosity;
此属性值会将两个图层的亮度进行混合产生一种亮度平衡的效果。以下是一个简单的例子
.parent {\n background-image: url(\background-image.jpg\);\n mix-blend-mode: luminosity;\n}\n\n.child {\n background-image: url(\foreground-image.png\);\n}\n
这个例子中父元素的背景图和子元素的背景图进行亮度混合产生一种亮度平衡的效果。 7.mix-blend-mode: color-dodge;
此属性值会将两个图层的颜色值进行颜色减淡计算产生一种颜色亮度较高的效果。以下是一个简单的例子
.parent {\n background-image: url(\background-image.jpg\);\n mix-blend-mode: color-dodge;\n}\n\n.child {\n background-image: url(\foreground-image.png\);\n}\n
这个例子中父元素的背景图和子元素的背景图进行颜色减淡计算产生一种颜色亮度较高的效果。
参考CSS3 -- mix-blend-mode属性详解
