在div中的線性漸變上添加填充圖案

Question

我有一個以線性漸變為背景的div。 使用顏色參數創建此漸變。 但我也想在漸變上顯示斜線圖案。

"background: linear-gradient(" + color2 + "," + color + ")"

我用另一個線性漸變創建了填充圖案：

background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black   75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); 
background-size: 4px 4px;
background-position: 0 0, 2px 2px;

我無法同時顯示兩個線性梯度。

Answer 1

您可以嵌套div，然后分別應用樣式：

HTML

<div class="div1"><div class="div2"></div></div>

的CSS

.div1 {background: linear-gradient(#f00000,#ffffff)}
.div2 
{
    background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black  75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); 
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}

例

Answer 2

順序很重要。 您的最后一個背景圖像將首先被渲染，因此該背景圖像必須是非透明的。

而且，您需要保留所有相關的屬性，大小和來源：

.div1 {
    background-image: 
        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black  75%, black), 
        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
        linear-gradient(#f00000,#ffffff);
    background-size: 4px 4px, 4px 4px, 100% 100%;    
    background-position: 0px 0px, 2px 2px, 0px 0px;
}

小提琴