混合对角线性渐变

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

您可以试用新的 background-blend-mode，它目前处于 Compositing and blending Level 1 的编辑草稿中。

参考文献：background-blend-mode and 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; 
 background-blend-mode: color, hard-light;
}

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

Answer 2

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

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

混合对角线性渐变

Blend diagonal linear gradients

css

linear-gradients