创建线性渐变背景叠加

Question

我目前正在尝试使用CSS创建一个linear-gradient。

渐变应从左侧开始全黑，并在中间以降低的不透明度结束。现在从较低的不透明度开始，在右侧再次以正常的不透明度结束。

我的问题如下：

使用两个不同的div元素只能得到很好的结果。

示例：

<div style="float: left; background: linear-gradient(to right, rgba(0, 0, 0, 0.69) 0%, rgba(0, 0, 0, 0) 100%);"></div>
<div style="float: right; background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.69) 99%, rgba(0, 0, 0, 0.69) 100%);"></div>

我的问题：

如何在一个div元素中创建linear-gradient？

截屏结果：

Answer 1

在左div中，将100％更改为50％，然后将第一个rgba复制为100％状态：

<div style="background: linear-gradient(to right, rgba(0, 0, 0, 0.69) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.69) 100%); height:20px;"></div>

Answer 2

您可以考虑多个背景：

body {
 margin:0;
 height:100vh;
  background: 
    linear-gradient(to right, rgba(0, 0, 0, 0.69), rgba(0, 0, 0, 0)),
    linear-gradient(to left,  rgba(0, 0, 0, 0.69), rgba(0, 0, 0, 0));
  background-repeat:no-repeat;
  background-size:50% 100%;
  background-position:left,right;
}