html - 将此渐变图像转换为 CSS 渐变

Question

我正在尝试使用 CSS 生成下面的渐变图像。但是，我正在努力对齐。您会在我的代码片段中注意到这个问题。我尝试对它们进行绝对定位，但这只会让事情变得更糟。

.gradients {
  position: relative;
  width: 100%;
}

.gradients div {
  height: 40px;
}

.bottom-gradient {
  -ms-transform: rotate(0.6deg);
  -webkit-transform: rotate(0.6deg);
  transform: rotate(0.6deg);
  background: -moz-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(37, 52, 47, 0.9)), color-stop(100%, rgba(3, 95, 26, 0.9)));
  background: -webkit-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -o-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -ms-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: linear-gradient(to right, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80414c46', endColorstr='#80035f1a', GradientType=1);
}

.top-gradient {
  -ms-transform: rotate(0.6deg);
  -webkit-transform: rotate(0.6deg);
  transform: rotate(0.10deg);
  background: -moz-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3, 95, 26, 0.9)), color-stop(100%, rgba(37, 52, 47, 0.9)));
  background: -webkit-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -o-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -ms-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: linear-gradient(to right, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80035f1a', endColorstr='#80414c46', GradientType=1);
}

<div class="gradients">
  <div class="top-gradient"></div>
  <div class="bottom-gradient"></div>
</div>

Answer 1

position: absolute 或负数 margin 都可以，但需要硬编码值。一个更灵活的替代方案是将 transform: translateY(-100%) 添加到您的 .bottom-gradient。

因为你已经在这个元素上有一个transform: rotate(0.6deg)，你可以将translateY附加到它:

.bottom-gradient { transform: rotate(0.6deg) translateY(-100%) }

为了更接近地复制图像，我还进行了以下更改:

• 将渐变的旋转更改为1deg和-1deg。
• 将高度更改为16px；

.gradients {
  position: relative;
  width: 100%;
}

.gradients div {
  height: 16px;
}

.bottom-gradient {
  -ms-transform: rotate(-1deg) translateY(-100%);
  -webkit-transform: rotate(-1deg) translateY(-100%);
  transform: rotate(-1deg) translateY(-100%);
  background: -moz-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(37, 52, 47, 0.9)), color-stop(100%, rgba(3, 95, 26, 0.9)));
  background: -webkit-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -o-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -ms-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: linear-gradient(to right, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80414c46', endColorstr='#80035f1a', GradientType=1);
}

.top-gradient {
  -ms-transform: rotate(1deg);
  -webkit-transform: rotate(1deg);
  transform: rotate(1deg);
  background: -moz-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3, 95, 26, 0.9)), color-stop(100%, rgba(37, 52, 47, 0.9)));
  background: -webkit-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -o-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -ms-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: linear-gradient(to right, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80035f1a', endColorstr='#80414c46', GradientType=1);
}

<div class="gradients">
  <div class="top-gradient"></div>
  <div class="bottom-gradient"></div>
</div>