在 CSS 中创建“复杂”背景

Question

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

不使用图像的原因是加载时间较长，并且当浏览器小于 1920 像素（图像宽度）时，我无法调整其宽度。

已经尝试过线性渐变，但我无法让它工作......

问候， 延斯

Answer 1

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

div { 
  background-color: black; 
  background-image: linear-gradient(to right, white, black); 
  background-repeat:no-repeat;
  background-size:100% 20px; /*full width, 20px height*/
  background-position:0 100%; /*gradient at bottom*/
  
  /*just to give size to demo*/
  min-height:50px;
}

<div></div>

Answer 2

这里有一些 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 */
} 

来源：http://www.w3schools.com/css/css3_gradients.asp

Answer 3

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

• 首先是你真的可以在彼此上创建多个背景堆栈： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
• 其次，您可以确定position、size 等... 的background-image。这里是它的简洁语法：https://www.w3schools.com/cssref/css3_pr_background.asp。

为什么是background-image？ CSS 中一个基本（也是重要的）背景理论是：一个元素的背景只能有 1 个background-color，并且多个background-images 位于其上 （即使在背景图像之后声明了背景颜色，background-color 仍将放置在背景图像下方），您可以调整这些背景图像的大小、重新定位。重要的是 linear-gradient 算作 background-image，不是 background-color。上面的 2 个链接确实提供了有关它的所有详细信息。

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

div { 
  background: 
    linear-gradient(to right, white, black) 0 100%/100% 20px no-repeat,
    linear-gradient(to left, white, black) 0 0/100% 20px no-repeat,
    black;
  height: 100px;
}

<div></div>

---

---

我写这篇长评论的灵感来自一个教程 https://levelup.gitconnected.com/how-to-implement-netflix-slider-with-react-and-hooks-bdb9b99d1ce4，其中有一部分是 HTML 和 CSS 中的冗长 hack，以实现我能够在一行 CSS background 中做的事情，我认为分享很酷，isn不是吗？

/* simpler */

.box {
  width: 100%;
  height: 100px;
  background: linear-gradient(to right,black 0%,black 30%,transparent 75%,transparent 100%), green;
}

/* more complex */

.content {
  height: 100px;
  position: relative;
}

.background {
  display: flex;
  height: 100%;
}

.left {
  background: black;
  width: 30%;
  position: relative;
}

.left:before {
  content: '';
  position: absolute;
  background-image: linear-gradient(to right,#000,transparent);
  top: 0;
  bottom: 0;
  left: 100%;
  width: 275px;
}

.right {
  background: green;
  width: 70%;
}

.content-container {
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px
}

<!-- simpler -->

<div class="box">
  <div class="content-container">content here...</div>
</div>

<hr>

<!-- more complex -->
<div class="content">
  <div class="background">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
  <div class="content-container">content here...</div>
</div>