Как смешивать цвета в CSS?

Question

У меня есть следующий код:

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

Как я могу сделать это так, что, когда оба класс .deleted и .reviewed устанавливаются на элементе, background-color из .deleted учитывает background-color из .reviewed?

При использовании двух классов цвет должен быть темнее, чем если бы он использовался только классом .deleted.

Answer 1

Если вы используете препроцессор CSS, например. SASS/LESS вы можете просто определить две цветовые переменные и использовать функции смешивания цветов для генерации третьего цвета.

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

вы можете установить 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)); 

Answer 3

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

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

.reviewed.deleted означает элемент, имеющий класс reviewed и deleted

Answer 4

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

преимуществом этого является то, что вы не должны указывать третий цвет, расчет производится по CSS. Недостатком является то, что в IE или Edge в настоящее время нет поддержки.

background-blend-mode поддерживается Firefox, Chrome и частично поддерживается Safari. http://caniuse.com/#feat=css-backgroundblendmode