css - 我可以混合/混合来自不同 css 类的两种背景颜色吗

Question

这个问题在这里已经有了答案:





How to add a background image on top of a previous background image?

(1 个回答)


2年前关闭。




我在做 table 时遇到麻烦<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 都有不同的状态(类)为了我的工作

喜欢一些 示例在这里

//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:不适合白人BG

Answer 1

您可以使用 background-image 堆叠背景颜色和渐变。虽然肯定不理想，但一种可能性是为每种可能的背景颜色组合创建一堆渐变。这对于小套颜色很有效，但对于大套颜色可能会很乏味。

下面显示的代码使用 CSS variables为了简洁。如果你想要更好的支持和更简洁的代码，你可以使用像 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 编写更漂亮的版本。如果你想成为 super 花哨的我想你可以使用 Sass 创建一个 power set自动生成样式的所有可能的类组合，但我不会在这里这样做。

编辑 :我很喜欢并制作了 a 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);
}

(尝试在像 this one 这样的 Sass 编译器上编译它)。