Can I mix/blend two background-color from different css class [duplicate]

Question

I have trouble about to make table <td>/<th> selection cells.

When cell(s) selected background-color: rgba(51, 122, 183, 0.2) !important; will use

But It will replace old background-color: CSS style

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

So it's work on another layer tag like this

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

but I don't want like this because each td have different state(class) for my job

Like some EXAMPLE Here

//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>

I just want two background-color: that blend together not replace

Addition: I have tried filter: don't work for white BG

Answer 1

You can stack background colors using background-image and gradients. While certainly not ideal, one possibility is to create a stack of gradients for every possible combination of background colors. This will work fine for small sets of colors, but may be tedious for larger sets.

The code shown below uses CSS variables for concision. If you want better support and more concise code, you can use a CSS preprocessor like Sass (which has macros for even less writing) to easily generate the standard CSS for this task.

: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>

A prettier version can be written with Sass. If you want to be uber-fancy I guess you can use Sass to create a power set of all possible combinations of classes to auto-generate the styles, but I'm not going to do that here.

Edit: I went fancy and made a Sass partial to auto-generate the styles given classes. This doesn't allow you to pick and choose combinations, but it auto-generates the 2^n combinations of n colors. Again, not performance-optimal because of the large generated CSS size, but perhaps convenient for small sets of colors.

// 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)

This generates the 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);
}

(Try compiling it on a Sass compiler like this one).