如果 var(--color) 未定义，则回退到棋盘格

问题描述

如何才能在设置 --color 时覆盖棋盘背景？

.cell {
  display: inline-block;
  width: 100px;
  height: 100px;
  /* from https://stackoverflow.com/a/51054396/65387 */
  background-image: /* tint image */
  linear-gradient(to right,rgba(204,204,0.9),0.9)),/* checkered effect */
  linear-gradient(to right,black 50%,white 50%),linear-gradient(to bottom,white 50%);
  background-blend-mode: normal,difference,normal;
  background-size: 25px 25px;
}

.a {
  background-color: var(--color);
}

.b {
  background: var(--color);
}

<div>
  <div class="cell a">a1</div>
  <div class="cell a" style="--color:red;">a2</div>
</div>
<div>
  <div class="cell b">b1</div>
  <div class="cell b" style="--color:red;">b2</div>
</div>

a2 不会像我想要的那样覆盖背景。

b2 确实如此，但随后 b1 变为白色。

有没有没有 JavaScript 的方法可以做到这一点？

解决方法

如果未定义变量，您可以使用 var() second parameter。

ConstructorInitializerIndentWidth

.cell {
  display: inline-block;
  width: 100px;
  height: 100px;
  /* from https://stackoverflow.com/a/51054396/65387 */
  
  background-blend-mode: normal,difference,normal;
  background-size: 25px 25px;
}



.b {
  background-image:/* tint image */
  linear-gradient(to right,var(--color,rgba(204,204,0.9)),0.9))),/* checkered effect */
  linear-gradient(to right,black 50%),white 50%)),linear-gradient(to bottom,white 50%));
}

,

使用如下所示的额外图层：

.cell {
  display: inline-block;
  width: 100px;
  height: 100px;
  
  background: 
    linear-gradient(var(--color,transparent) 0 0),/* the extra layer */
    linear-gradient(rgba(204,0.9) 0 0),linear-gradient(to right,black 50%,white 0),white 0);
  background-blend-mode:normal,normal,normal;
  background-size: 25px 25px;
}

<div class="cell">a1</div>
<div class="cell" style="--color:red;">a2</div>
<div class="cell" style="--color:blue;">b2</div>

您也可以缩放解决方案以考虑图像：

.cell {
  display: inline-block;
  width: 100px;
  height: 100px;
  
  background: 
    var(--image,linear-gradient(transparent 0 0)),/* the extra image layer */
    linear-gradient(var(--color,/* the extra color layer */
    linear-gradient(rgba(204,white 0) 0 0/25px 25px,white 0) 0 0/25px 25px;
  background-blend-mode:normal,normal;
}

<div class="cell">a1</div>
<div class="cell" style="--color:red;">a2</div>
<div class="cell" style="--image:linear-gradient(green,blue);">b2</div>
<div class="cell" style="--image:url(https://picsum.photos/id/1/200/200) center/cover;">b3</div>
<div class="cell" style="--image:url(https://picsum.photos/id/18/50/50)  center no-repeat;--color:yellow">b4</div>

带有 conic-gradient 且没有混合模式的优化版本

.cell {
  display: inline-block;
  width: 100px;
  height: 100px;
  
  background: 
    var(--image,repeating-conic-gradient(#fff 0 90deg,#000 0 180deg) 0 0/25px 25px;
}

<div class="cell">a1</div>
<div class="cell" style="--color:red;">a2</div>
<div class="cell" style="--image:linear-gradient(green,blue);">b2</div>
<div class="cell" style="--image:url(https://picsum.photos/id/1/200/200) center/cover;">b3</div>
<div class="cell" style="--image:url(https://picsum.photos/id/18/50/50)  center no-repeat;--color:yellow">b4</div>

另一个使用伪元素的想法：

.cell {
  display: inline-block;
  width: 100px;
  height: 100px;
  position:relative;
  z-index:0;
  background: 
    linear-gradient(rgba(204,#000 0 180deg) 0 0/25px 25px;
}
.cell::before,.cell::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
}
.cell::before {
  background:var(--color);
}
.cell::after {
  background:var(--image);
}

<div class="cell">a1</div>
<div class="cell" style="--color:red;">a2</div>
<div class="cell" style="--image:linear-gradient(green,blue);">b2</div>
<div class="cell" style="--image:url(https://picsum.photos/id/1/200/200) center/cover;">b3</div>
<div class="cell" style="--image:url(https://picsum.photos/id/18/50/50)  center no-repeat;--color:yellow">b4</div>

,

如果不使用 JavaScript，我认为在未定义 --color 时提供自定义回退的唯一方法是使用 fallback value。

自定义回退值只是浏览器的备份，如果给定变量未定义或具有无效值，则支持 CSS 自定义属性的浏览器可以选择不同的值。

.a {
  background-image: var(--color,var(--checkerboard)); /* css var for linear-gradients */
  background-color: var(--color);
}

因此，如果未定义自定义属性 --color，浏览器将使用回退值。在这种情况下，使用 background-image 和 background-color 的组合似乎可以解决问题。

它的工作原理是测试 background-image 属性以查看是否定义了 --color。如果不是，则通过使用 linear-gradient 组合作为回退值来保留棋盘格设计。

:root {
  --checkerboard: /* tint image */
  linear-gradient(to right,0.9),white 50%),white 50%);
}

.cell {
  display: inline-block;
  width: 100px;
  height: 100px;
  /* from https://stackoverflow.com/a/51054396/65387 */
  background-image: var(--checkerboard); /* can be removed but then .a or .b will need to be defined */
  background-blend-mode: normal,normal;
  background-size: 25px 25px;
}

.a {
  background-image: var(--color,var(--checkerboard));
  background-color: var(--color);
}

.b {
  background-image: var(--color,var(--checkerboard));
  background-color: var(--color);
}

<div>
  <div class="cell a">a1</div>
  <div class="cell a" style="--color: red;">a2</div>
</div>
<div>
  <div class="cell b">b1</div>
  <div class="cell b" style="--color: red;">b2</div>
</div>