Html 创建一个"；复杂的；CSS背景

我想知道是否有可能在CSS3中创建这样的背景。 背景应该跨越标题div，渐变应该从白色变为黑色，与屏幕宽度无关（左侧始终为白色，右侧始终为黑色）

不使用图像的原因是加载需要更长的时间，而且当浏览器小于1920px（图像的宽度）时，我无法让它调整其宽度

我试过线性梯度，但我不能让它工作

问候,，

---

Jens

以下是一些CSS：

#grad {
  background: gray; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, white , black); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, white, black); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, white , black); /* Standard syntax */
} 

---

来源：

如果您还希望顶部有黑色条，则应为背景提供尺寸，停止重复，并将其放置在您想要的位置（将其视为普通背景图像）

div{
背景色：黑色；
背景图像：线性渐变（向右、白色、黑色）；
背景重复：无重复；
背景尺寸：100%20px；/*全宽，20px高*/
背景位置：0 100%；/*底部渐变*/
/*只是为了给演示增加尺寸*/
最小高度：50px；
}

---

我知道OP的问题得到了回答。但无论如何，我会在这里发表评论，以提供更多信息，创建一个真正更“复杂”的背景

• 首先，您确实可以在彼此之间创建多个背景堆栈：
• 第二个是你可以确定位置、大小等，。。。背景图像的。这里是它的简明语法：

为什么背景图像？CSS中背景的一个基本（也是重要的）理论是：一个元素的背景只能有1

背景色

，并且多个

背景图像

位于其上方（即使在背景图像之后声明背景色，

背景色

仍将置于背景图像下方），您可以调整这些背景图像的大小和位置。重要的是，

线性渐变

被视为

背景图像

，而不是

背景颜色

。上面的两个链接提供了所有详细信息

下面是一个关于OP问题的“更复杂”背景的快速演示，仅使用1

div

HTML：

div{
背景：
线性梯度（向右、白色、黑色）0 100%/100%20px无重复，
线性梯度（向左、白色、黑色）0 0/100%20px无重复，
黑色
高度：100px；
}

---

#div{背景颜色：黑色；背景图像：线性渐变（向右，白色，黑色）；}这只会创建渐变。不知道如何降低渐变的高度吗？你没有HTML代码吗？当然有，但这有关系吗？我想将其应用于任何div。作为背景。尝试ColorZilla编辑器，你可以创建一些非常酷的背景-太棒了！非常感谢