How to mix colors in CSS?

Question

I have the following code:

.reviewed {
  background-color: rgba(228, 225, 219, 1);
}
.deleted {
  background-color: red;
}

<table>
  <tr>
    <td>№</td>
    <td>Name</td>
  </tr>
  <tr class="reviewed">
    <td>1</td>
    <td>Ivan</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Andrey</td>
  </tr>
</table>

Run codeHide result

How can I do so that, when the two classes .deleted, and .reviewedestablished on an element, background-colorof .deletedinto account background-colorof .reviewed?

When using two classes, the color should be darker than if he were using a class .deleted.

Answer 1

If you use a CSS preprocessor, for example. SASS / LESS, you can simply define two color variables and use the color blending functions to generate a third color.

SASS example :

$color1: rgba(228, 225, 219, 1);
$color2: red;

.reviewed {
  background-color: $color1;
}
.deleted {
  background-color: $color2;
}
.reviewed.deleted {
  background-color: mix($color1, $color2);
}

LESS example

Answer 2

.reviewed {
    background-color:rgba(228, 225, 219, 1);
}

.deleted {
    background-color:red;
}
.reviewed.deleted {
    background-color:/*use color code for something dark red*/
}

.reviewed.deletedmeans an element having a class reviewedanddeleted

Answer 3

`background-blend-mode`

background-blend-mode: mulitply; background-color .deleted.

:

• background-color:rgba(228, 225, 219, 1); background-image: linear-gradient(0deg, rgba(228, 225, 219, 1), rgba(228, 225, 219, 1)); .reviewed. .reviewed , background-blend-mode background-color, .deleted
• background-blend-mode: multiply; .deleted, " ", .reviewed

.reviewed {
  background-image: linear-gradient(0deg, rgba(228, 225, 219, 1), rgba(228, 225, 219, 1));
}
.deleted {
  background-blend-mode: multiply;
  background-color: red;
}

<table>
  <tr>
    <td>Number</td>
    <td>Name</td>
  </tr>
  <tr class="reviewed">
    <td>1</td>
    <td>Reviewed</td>
  </tr>
  <tr class="reviewed deleted">
    <td>2</td>
    <td>Reviewed and deleted</td>
  </tr>
  <tr class="deleted">
    <td>3</td>
    <td>Deleted</td>
  </tr>
</table>

Hide result

, , CSS. , IE Edge .

background-blend-mode Firefox, Chrome Safari. http://caniuse.com/#feat=css-backgroundblendmode

Answer 4

css , Photoshop

background-image: -webkit-linear-gradient(to bottom right, red, rgba(255,0,0,0));
background-image: -ms-linear-gradient(to bottom right, red, rgba(255,0,0,0));
background-image: -o-linear-gradient(to bottom right, red, rgba(255,0,0,0));
background-image: -moz-linear-gradient(to bottom right, red, rgba(255,0,0,0));