我正在尝试使用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>