混合對角線性漸變

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>