我有以下代码：如何在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`可以让你将两个背景混合在一起

相关问题