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

Pueblo

Really interesting question! Unfortunately, I think your "layer tag" idea might be the best way to achieve this. – Staghound

This question should not be closed as a duplicate, because the duplicate mentioned is related but not actually the same question! – Opuscule

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

Staghound

Great solution but when i have set color col1 by alpha 0.2 > 1 will show only col1 color By the way I will try on my code first – Direction

@I'mLimit alpha ranges between 0 and 1, with 0 being transparent and 1 being full opacity (this is why only one color shows). I'm going to write up a quick Sass example too to show how this can be much cleaner with a preprocessor – Staghound

In my real work it have only 5 status in td. So I have make DEMO some selected color didn't show well (green) – Direction

@I'mLimit But it works, right? That might be a question of choosing colors that span the color space more evenly to get more distinct colors. – Staghound

Yep! but i need to add table background-color: white first if place over another color object (if not it will gone another color) but THANK YOU for your help – Direction

@I'mLimit I was absurdly fascinated by this question and Sass so I spent some time today writing something to generate all possible combinations of the classes in this fashion: github.com/jlam55555/color-layer-generator. – Staghound

Thank for your interest! please take care about some COLOR object backward <span> block it will layer too. – Direction