You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Note: Applying a blendmode other than <a value>normal</a> to the element must establish a new <a spec="css21">stacking context</a>[[!CSS21]]. This group must then be blended and composited with the <a spec="css21">stacking context</a> that contains the element.
@@ -227,7 +227,7 @@ div { background-image: url('texture.png'); }
227
227
}
228
228
p {
229
229
mix-blend-mode: overlay;
230
-
font-family: "Mythos Std"
230
+
font-family: "Mythos Std"
231
231
}
232
232
</pre>
233
233
@@ -302,7 +302,7 @@ property for that element must be reset to its initial value.
302
302
<p>And the following style rule:</p>
303
303
<pre>
304
304
body { background-color: lime; }
305
-
div {
305
+
div {
306
306
width: 200px;
307
307
height: 200px;
308
308
background-size: 200px 200px;
@@ -363,7 +363,7 @@ Where the graphic element is opaque, it obscures the backdrop and where the grap
363
363
-->
364
364
365
365
In the model described in this specification there are two steps to the overall compositing operation - <a href="#advancedcompositing">Porter-Duff compositing</a> and <a href="#blending">blending</a>.
366
-
<!--Porter Duff compositing takes into account the overall shape of the graphic element and its opacity, as well as the opacity and shape of the backdrop, and
366
+
<!--Porter Duff compositing takes into account the overall shape of the graphic element and its opacity, as well as the opacity and shape of the backdrop, and
367
367
determines where the backdrop is visible, where the graphic element is visible and where one is visible through the other.-->
368
368
The blending step determines how the colors from the graphic element and the backdrop interact.
369
369
@@ -385,7 +385,7 @@ The formula for simple alpha compositing is
385
385
co = Cs x αs + Cb x αb x (1 - αs)
386
386
</pre>
387
387
388
-
Where
388
+
Where
389
389
390
390
<ul>
391
391
<li>co: the premultiplied pixel value after compositing
@@ -400,10 +400,10 @@ Note: All values are between 0 and 1 inclusive.
400
400
The pixel value after compositing (co) is given by adding the contributions from the source graphic element [Cs x αs] and the backdrop [Cb x αb x (1 - αs)].
401
401
For both the graphic element and the backdrop, the color values are multiplied by the alpha to determine the amount of color that contributes.
402
402
With zero alpha meaning that the color does not contribute and partial alpha means that some percentage of the color contributes.
403
-
The contribution of the backdrop is further reduced based on the opacity of the graphic element.
403
+
The contribution of the backdrop is further reduced based on the opacity of the graphic element.
404
404
Conceptually, (1 - αs) of the backdrop shows through the graphic element, meaning that if the graphic element is fully opaque (αs=1) then no backdrop shows through.
405
405
406
-
The simple alpha compositing formula listed above gives a resultant color which is the result of the
406
+
The simple alpha compositing formula listed above gives a resultant color which is the result of the
407
407
weighted average of the backdrop color and graphic element color, with the weighting determined by the backdrop and
408
408
graphic element alphas.
409
409
The resultant alpha value of the composite is simply the sum of the contributed alpha of the composited elements.
@@ -413,7 +413,7 @@ The formula for the resultant alpha of the composite is
413
413
αo = αs + αb x (1 - αs)
414
414
</pre>
415
415
416
-
Where
416
+
Where
417
417
418
418
<ul>
419
419
<li>αo: the alpha value of the composite
@@ -429,7 +429,7 @@ The pre-multiplied value is given by
429
429
<pre>
430
430
cs = Cs x αs
431
431
</pre>
432
-
with
432
+
with
433
433
<ul>
434
434
<li>cs: the pre-multiplied value
435
435
<li>Cs: the color value
@@ -770,7 +770,7 @@ The area of each region can be calculated with the following equations:
770
770
The figure above represents coverage of 0.5 for both source and destination.
771
771
772
772
<pre>
773
-
Both = 0.5 x 0.5 = 0.25
773
+
Both = 0.5 x 0.5 = 0.25
774
774
Source Only = 0.5 (1 – 0.5) = 0.25
775
775
Destination Only = 0.5(1 – 0.5) = 0.25
776
776
None = (1 – 0.5)(1 – 0.5) = 0.25
@@ -901,7 +901,7 @@ Destination which overlaps the source, replaces the source.
901
901
</div>
902
902
<pre>
903
903
Fa = 0; Fb = αs
904
-
co = αb x Cb x αs
904
+
co = αb x Cb x αs
905
905
αo = αb x αs
906
906
</pre>
907
907
@@ -988,8 +988,8 @@ Display the sum of the source image and destination image. It is defined in the
988
988
<!--<h4 id="groupcompositingisolation">Isolated groups and Porter Duff modes</h4>-->
989
989
990
990
When compositing the elements within an isolated group, the elements are composited over a transparent black initial backdrop. If the bottom element in the group uses a Porter Duff compositing operator
991
-
which is dependent on the backdrop, such as <a href="#porterduffcompositingoperators_dst">destination</a>, <a href="#porterduffcompositingoperators_srcin">source-in</a>,
992
-
<a href="#porterduffcompositingoperators_dstin">destination-in</a>, <a href="#porterduffcompositingoperators_dstout">destination-out</a> or <a href="#porterduffcompositingoperators_srcatop">source-atop</a>,
991
+
which is dependent on the backdrop, such as <a href="#porterduffcompositingoperators_dst">destination</a>, <a href="#porterduffcompositingoperators_srcin">source-in</a>,
992
+
<a href="#porterduffcompositingoperators_dstin">destination-in</a>, <a href="#porterduffcompositingoperators_dstout">destination-out</a> or <a href="#porterduffcompositingoperators_srcatop">source-atop</a>,
993
993
then the result of the composite will be empty. Subsequent elements within the group are composited with the result of the first composite.
994
994
995
995
<!--
@@ -1103,7 +1103,7 @@ This is the default attribute which specifies no blending. The blending formula
The source color is multiplied by the destination color and replaces the destination.
1106
+
The source color is multiplied by the destination color and replaces the destination.
1107
1107
1108
1108
The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color.
1109
1109
@@ -1224,7 +1224,7 @@ Multiplies or screens the colors, depending on the source color value. The effec
1224
1224
if(Cs <= 0.5)
1225
1225
B(Cb, Cs) = Multiply(Cb, 2 x Cs)
1226
1226
else
1227
-
B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
1227
+
B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
1228
1228
</pre>
1229
1229
1230
1230
See the definition of <a value>multiply</a> and <a value>screen</a> for their formulas.
@@ -1298,28 +1298,28 @@ The nonseparable blend mode formulas make use of several auxiliary functions:
1298
1298
1299
1299
<pre>
1300
1300
Lum(C) = 0.3 x Cred + 0.59 x Cgreen + 0.11 x Cblue
0 commit comments