From 536e80337e3555d08d828f192c28fb57454ac4f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=80=E4=B8=9D?= Date: Thu, 7 May 2026 18:52:51 +0800 Subject: [PATCH 1/2] Change the computed value of `light-dark()` none from `linear-gradient(transparent)` to `image(transparent)` --- css-color-5/Overview.bs | 17 +++++++++-------- css-images-4/Overview.bs | 6 +++++- css-images-5/Overview.bs | 6 +++++- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index bf19e51b54b3..bda5795660c8 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -2808,15 +2808,10 @@ or any other color or monochrome output device which has been characterized. if the used color scheme is ''light'' or unknown, or the second image, if the used color scheme is ''dark''. - The none keyword - produces a fully transparent image - with no natural size. - - It is equivalent to a single-stop gradient whose stop color is ''transparent''': - 
-		linear-gradient(transparent)
-
+ The ''none'' keyword + produces a fully transparent image + with no natural size. It is equivalent to ''image(transparent)''.
For example, to maintain a legible contrast on links, @@ -2866,6 +2861,12 @@ or any other color or monochrome output device which has been characterized. 
 				background-image: light-dark(url(my-light-image.png), none);
+ + This is equivalent to: + + 
+				background-image: light-dark(url(my-light-image.png), image(transparent));
+
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs index b5a087a1ca0e..632e9fd495ac 100644 --- a/css-images-4/Overview.bs +++ b/css-images-4/Overview.bs @@ -395,7 +395,11 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation} one can use this as a simple way to "tint" a background image, by overlaying a partially-transparent color over the top of the other image: - 
background-image: image(rgba(0,0,255,.5)), url("bg-image.png");
+ 
background-image: image(rgba(0, 0, 255, .5)), url("bg-image.png");
+ + This is equivalent to a single color stop gradient: + + 
background-image: linear-gradient(rgba(0, 0, 255, .5)), url("bg-image.png");
'background-color' does not work for this, as the solid color it generates always lies beneath all the background images. diff --git a/css-images-5/Overview.bs b/css-images-5/Overview.bs index cedc19fed8dd..d66fb4492568 100644 --- a/css-images-5/Overview.bs +++ b/css-images-5/Overview.bs @@ -201,7 +201,11 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation} one can use this as a simple way to "tint" a background image, by overlaying a partially-transparent color over the top of the other image: - 
background-image: image(rgba(0,0,255,.5)), url("bg-image.png");
+ 
background-image: image(rgba(0, 0, 255, .5)), url("bg-image.png");
+ + This is equivalent to a single color stop gradient: + + 
background-image: linear-gradient(rgba(0, 0, 255, .5)), url("bg-image.png");
'background-color' does not work for this, as the solid color it generates always lies beneath all the background images. From 986d44d573828a9674f56c60ad30ed6100a882a0 Mon Sep 17 00:00:00 2001 From: "Tab Atkins Jr." Date: Thu, 7 May 2026 14:55:19 -0700 Subject: [PATCH 2/2] Apply suggestion from @tabatkins --- css-color-5/Overview.bs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index bda5795660c8..7936e50df33b 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -2809,9 +2809,9 @@ or any other color or monochrome output device which has been characterized. or the second image, if the used color scheme is ''dark''. - The ''none'' keyword - produces a fully transparent image - with no natural size. It is equivalent to ''image(transparent)''. + The none keyword + computes to ''image(transparent)'' + (a fully transparent image with no natural size).
For example, to maintain a legible contrast on links,