HTML减少图像上的渐变层？

Question

我有一个带有渐变图层的图像部分，该图层内置于主题的样式表中。我需要更改此代码块中的哪些内容以降低梯度？

.image-section {
background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}

感谢任何处理此代码块的帮助。

Answer 1

要减少渐变，您应该更改背景渐变值，例如:

background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);

以前的样式在高度的 0% 处以不透明度 0.2 开始，在高度的 100% 处以不透明度 0.9 结束，您可以根据需要更改这些不透明度值。

假设你想从 0.2 开始，以 0.5 结束，样式应该是这样的:

background: -moz-linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%)

风格:

.image-section {
background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.3)), color-stop(80%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}

演示:https://jsfiddle.net/IA7medd/rnjunkod/