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

Example

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

fiddle

在div中的线性渐变上添加填充图案

2 个答案: