css - 混合对 Angular 线性渐变

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

您有一种可能性，无需过多改变您当前的方法。

只需设置两次红色条纹，第一次没有透明度。在顶部，设置蓝色条纹，然后在顶部设置红色条纹，现在使用 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>

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>