混合对角线性渐变

Question

我已创建此模式，由蓝色和红色线组成。但是我无法找到一种方法将红色和蓝色的线（如果我是正确的话，就像是深紫色的东西）混合在一起（参见第三种情况）。有任何想法吗？使用透明度不会有帮助，因为我只希望它透过它。

div{ 
 
    width:50px; height:100px; 
 
    border: solid 2px black; 
 
    float:left; 
 
    margin:10px; 
 
    font-size:30px; 
 
    font-weight:bold; 
 
} 
 

 
.caro-pattern1 { 
 
    background-color:#2ECC40; 
 
    background-image: linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%); 
 
    background-size:50px 50px; 
 
} 
 
.caro-pattern2 { 
 
    background-color:#2ECC40; 
 
    background-image: 
 
    linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%); 
 
    background-size:50px 50px; 
 
} 
 
.caro-pattern3 { 
 
    background-color:#2ECC40; 
 
    background-image: 
 
    linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%), 
 
    linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%); 
 
    background-size:50px 50px; 
 
}

<div class="caro-pattern1">1</div> 
 
<div class="caro-pattern2">2</div> 
 
<div class="caro-pattern3">3</div>

Answer 1

你有一个posibility，不改变太多你目前的做法

刚刚成立的红色。条纹两次，第一次没有透明度。在上面，设置蓝色条纹，并在顶部设置红色，现在用alpha：

div { 
 
    width: 50px; 
 
    height: 100px; 
 
    border: solid 2px black; 
 
    float: left; 
 
    margin: 10px; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
} 
 

 
.caro-pattern3 { 
 
    background-color: #2ECC40; 
 
    background-image: 
 
    linear-gradient(45deg, rgba(255, 0, 0, .5) 5%, transparent 5%, transparent 45%, rgba(255, 0, 0, .5) 45%, rgba(255, 0, 0, .5) 55%, transparent 55%, transparent 95%, rgba(255, 0, 0, .5) 95%), 
 
    linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%), 
 
    linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%); 
 
    background-size: 50px 50px; 
 
}

<div class="caro-pattern3">3</div>

另一个posibility，如张贴由Abhitalks，是使用混合模式（具有有限的浏览器支持）。但是，你需要设置一个伪元素，以避免与立体背景共混：

div { 
 
    width: 50px; 
 
    height: 100px; 
 
    border: solid 2px black; 
 
    float: left; 
 
    margin: 10px; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
} 
 

 
.caro-pattern3 { 
 
    background-color: #2ECC40; 
 
    position: relative; 
 
} 
 

 
.caro-pattern3:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-image: 
 
    linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%), 
 
    linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%); 
 
    background-size: 50px 50px; 
 
    background-blend-mode: screen; 
 
}

<div class="caro-pattern3">3</div>

Answer 2

您可以用新的background-blend-mode，这是目前在编辑器对Compositing and blending Level 1草案进行试验。

参考文献：background-blend-mode和mix-blend-mode。

尽管如此，IE, Edge and Opera, with partial support in Safari目前不支持此功能。这使得只有Chrome和Firefox :(

摘要示例：

div { 
 
    width: 50px; height: 100px; 
 
    border: solid 2px black; 
 
    margin: 10px; 
 
} 
 

 
.caro-pattern3 { 
 
    background-color: #2ECC40; 
 
    background-image: 
 
    linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%), 
 
    linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%); 
 
    background-size: 50px 50px; 
 
\t background-blend-mode: color, hard-light; 
 
}

<div class="caro-pattern3">3</div>