在 Chrome 中使用 rgba 和 Color Blend 设置分层背景时属性值无效-解网

问：

我正在为CSS库制作一个材料，并制作了一个名为：.mica.base

.mica.base {
  background: rgba(243, 243, 243, 0.5) normal, rgba(243, 243, 243, 0.5) color, rgb(243, 243, 243) luminosity;
}

当我尝试在网页上使用它时，chrome 在行中抛出了错误，并说 .我尝试删除图层，将混合模式移动到不同的参数，并使用回退颜色，但没有任何效果。backgroundInvalid property value

.mica.base {
  background: rgba(243, 243, 243, 0.5) normal, rgba(243, 243, 243, 0.5) color, rgb(243, 243, 243) luminosity;
}

body {
  background: url("https://winui-3.gtoy118.repl.co/dist/img/img0.jpg");
  background-size: cover;
}

<div class="mica base">
  <div>Hello</div>
  <button id="button" class="winui-button undefined"><span><span class="icon"> </span>Segoe UI Icons</span></button>
  <div class="DisplayTextBlockStyle">Display</div>
  <div class="TitleLargeTextBlockStyle">Title Large</div>
  <div class="TitleTextBlockStyle">Title</div>
  <div class="SubtitleTextBlockStyle">Subtitle</div>
  <div class="BodyStrongBlockTextStyle">Body Strong</div>
  <div class="BodyTextBlockStyle">Body</div>
</div>

图像上方应该有一个半透明层。我从这个网站了解到背景分层：developer.mozilla.org/en-US/docs/Web/CSS/......包含有关分层背景以及 w3schools.com/css/css3_backgrounds.asp 的文档。

HTML CSS 背景

在 Chrome 中使用 rgba 和 Color Blend 设置分层背景时属性值无效

Invalid Property Value when setting layered Background using rgba and Color Blend in Chrome

评论