Question

我创建了这个模式，由蓝色和红色线组成。但我无法找到一种方法来混合红线和蓝线（如果我正确的话，就像深紫色那样），它们彼此交叉（见第三种情况）。有任何想法吗？使用透明度并没有帮助，因为我只想在它们交叉的地方。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

你有一个可能性，而不会改变你当前的方法。

只需设置红色条纹两次，第一次没有透明度。在顶部，设置蓝色条纹，在顶部设置againg红色条纹，现在使用alpha：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Abhitalks发布的另一个可能性是使用混合模式（浏览器支持有限）。但是你需要在伪元素上设置它以避免将它与实体背景混合：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以试用新的background-blend-mode，该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; }目前正在编辑Compositing and blending Level 1的草稿中。

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

请注意，IE, Edge and Opera, with partial support in Safari目前不支持此功能。这只剩下Chrome和Firefox :(

示例代码段：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

混合对角线性渐变

2 个答案: