我有以下代碼：如何在CSS中混合顏色？

.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是一個元素上設置的.deleted的background-color考慮到background-color的.reviewed？

使用這兩個類時，顏色應該比使用類.deleted時顏色更深。

來源

2016-08-25 Vladimir

如果您使用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

來源

2016-08-26 11:22:31

可以設置的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));

來源

2016-08-25 11:33:31

.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

來源

2016-08-25 11:34:09

做，在這種方式 – Vladimir

元件`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上.deleted
與background-color組工作添加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

來源

2016-08-25 11:58:19

如何在CSS中混合顏色？

回答

元件`background-blend-mode`可以讓你將兩個背景混合在一起

相關問題