我能混合两个不同CSS类的背景颜色吗？

Question

我能混合两个不同CSS类的背景颜色吗？

5

我遇到了一些关于制作表格 <td>/<th> 选择单元格的问题。

当选定单元格时，将使用background-color: rgba(51, 122, 183, 0.2) !important;

但它会替换原来的background-color: CSS样式。

<td class="bg1 bg2"></td>

所以它可以在另一个层级的标签上工作，像这样

<tr class="bg1"> <td class="bg2"></td> </tr>

但是我不希望这样，因为我的工作中每个 td 都有不同的状态(class)

就像这里的一些例子一样

//DON'T focus

var td = document.getElementsByTagName("TD");
for (i = 0; i < td.length; i++)
  td[i].onclick = doSomething;

function doSomething() {
  this.classList.toggle("clicked")
}

table,
tr,
td {
  border: 1px solid gray;
}
td{
  width: 100px;
  text-align: center;
}

.x {
  /* td status can't change */
  /*NON select BG*/
  background-color: lightcyan;
}

.y {
  /* td status can't change */
  /*NON select BG*/
  background-color: salmon;
}

.clicked {
  /*selected BG*/
  border: 1px double #4887C7;
  background-color: rgba(51, 122, 183, 0.2) !important;
}

<table>
  <tr>
    <td class="x clicked">a</td>
    <td class="y">b</td>
  </tr>
  <tr>
    <td class="y clicked">c</td>
    <td class="x">d</td>
  </tr>
</table>
<hr> WHAT I need to be - but i want class x,y into td
<table>
  <tr class="x">
    <td class="clicked">a</td>
    <td>b</td>
  </tr>
  <tr class="y">
    <td class="clicked">c</td>
    <td>d</td>
  </tr>
</table>

我只想要两个 background-color: 混合在一起而不是替换掉其中一个

补充：我已经尝试过使用 filter:，但对于白色背景不起作用

- I'm Limit

1

非常有趣的问题！不幸的是，我认为你的“层标签”想法可能是实现这一目标的最佳方式。 - Jonathan Lam

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan Lam · Accepted Answer

你可以使用background-image和渐变来叠加背景颜色。虽然这并不理想，但一种可能性是为每种可能的背景颜色组合创建一个渐变堆栈。这对于小型颜色集合来说很好用，但对于大型集合可能会很繁琐。

下面显示的代码使用CSS变量进行简洁处理。如果你想要更好的支持和更简洁的代码，可以使用像Sass这样的CSS预处理器（它具有甚至更少写作所需的宏）轻松生成此任务的标准CSS。

:root {
  --col1: linear-gradient(to right,
                          rgba(255, 0, 0, 0.2),
                          rgba(255, 0, 0, 0.2));
  --col2: linear-gradient(to right,
                          rgba(0, 255, 0, 0.2),
                          rgba(0, 255, 0, 0.2));
}

.col1 {
  background-image: var(--col1);
}
.col2 {
  background-image: var(--col2);
}
.col1.col2 {
  background-image: var(--col1),
                    var(--col2);
}

<div class='col1'>Color 1</div>
<div class='col2'>Color 2</div>
<div class='col1 col2'>Mixed</div>

使用Sass可以编写更漂亮的版本。如果您想要超级花哨，我猜您可以使用Sass创建所有可能组合的类的幂集，以自动生成样式，但我不会在这里这样做。

编辑：我变得花哨了，并制作了Sass partial来根据类自动生成样式。这不允许您选择组合，但它会自动生成n个颜色的2^n组合。同样，由于生成的CSS大小较大，性能并不优化，但对于小型颜色集可能很方便。

// compile gradients
@mixin layer-colors($colors...)
  $gradients: ''
  @each $color in $colors
    $gradients: '#{$gradients}, linear-gradient(to right, #{$color}, #{$opacity})'
  background-images: str-slice(unquote($gradients), 3)


// colors and options
$c1: 255, 0, 0
$c2: 0, 255, 0
$opacity: 0.2

// classes
.col1
  @include layer-colors($c1)
.col2
  @include layer-colors($c2)
.col1, .col2
  @include layer-colors($c1, $c2)

这句话的意思是：这会生成CSS代码。

.col1 {
    background-images: linear-gradient(to right, 255, 0.2);
}

.col2 {
    background-images: linear-gradient(to right, 0, 0.2);
}

.col1, .col2 {
    background-images: linear-gradient(to right, 255, 0.2), linear-gradient(to right, 0, 0.2);
}

（尝试在 Sass 编译器上编译，例如这个。）