Vladimir Vladimir - 3 months ago 9
HTML Question

How to mix colors in CSS?

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>





How can I make it so that when both the classes
.deleted
and
.reviewed
are set on an element the
background-color
of
.deleted
takes into account the
background-color
of
.reviewed
?

When using the two classes the color should be darker than if it was just using the class
.deleted
.

Answer

`background-blend-mode` can allow you to blend two backgrounds together

In this instance background-blend-mode: mulitply; can give you the desired effect of darkening the background-color of .deleted.

The following changes are required:

  • Change background-color:rgba(228, 225, 219, 1); to background-image: linear-gradient(0deg, rgba(228, 225, 219, 1), rgba(228, 225, 219, 1)); in .reviewed. This will give .reviewed the same background colour but will enable background-blend-mode to work with the background-color set on .deleted
  • Add background-blend-mode: multiply; to .deleted to enable the background colour to blend with the "background image" set on .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>

The advantage to this is that you don't have to specify a third colour as the calculation is done by CSS. The disadvantage is the there is currently no support for this in IE or Edge.

background-blend-mode is supported by Firefox, Chrome and partially supported by Safari. http://caniuse.com/#feat=css-backgroundblendmode