在div中的线性梯度上添加一个舱口图案。
在div中的线性梯度上添加一个舱口图案。
提问于 2014-03-21 05:48:13
我有一个以线性梯度为背景的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;我不能同时显示两个线性梯度。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-03-21 09:11:18
命令很重要。您的最后一个背景图像将首先呈现，因此这个必须是不透明的。
此外，您还需要保留所有相关的属性、大小和来源：
.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;
}Stack Overflow用户
发布于 2014-03-21 05:55:43
您可以嵌套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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22560628
复制相关文章
相似问题
腾讯云开发者
