Skip to content

Commit 1d186c2

Browse files
committed
[css-color-5][editorial] more alpha examples
1 parent 48160a6 commit 1d186c2

1 file changed

Lines changed: 12 additions & 0 deletions

File tree

css-color-5/Overview.bs

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1199,6 +1199,18 @@ in the range [0, 360].
11991199
drawing their values from the [=origin color=],
12001200
but the opacity is set to ''80%'' to make it slightly transparent,
12011201
regardless of what the [=origin color's=] opacity was.
1202+
1203+
While this example is syntactically correct,
1204+
and illustrates what happens,
1205+
there is a simpler form for this specific case of alpha-only manipulation,
1206+
which avoids having to list the unchanged color components:
1207+
1208+
<pre highlight=css>
1209+
html { --bg-color: <span class="swatch" style="--color: blue"></span> blue; }
1210+
.overlay {
1211+
background: <span class="swatch" style="--color: rgb(0,0,255,80%)"></span> alpha(from var(--bg-color) / 80%);
1212+
}
1213+
</pre>
12021214
</div>
12031215

12041216
<div class="example">

0 commit comments

Comments
 (0)