HTML在圖像上減少漸變層？

我有一個圖像部分，內置到主題樣式表中的漸變圖層。我需要改變這段代碼以減少漸變？HTML在圖像上減少漸變層？

.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%; 
}

任何幫助處理這塊代碼表示讚賞。

來源

2016-05-18 Michael Schmidt

看起來像這段代碼是使用[Ultimate CSS漸變生成器]（http://www.colorzilla.com/gradient-editor/）生成的，您可以在那裏導入相關的CSS並根據需要進行更改。 – Scott

爲了減少你應該改變的背景梯度值例如梯度：

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/

來源

2016-05-18 03:35:26

HTML在圖像上減少漸變層？

回答

相關問題