讓亮色梯度

說我有一個風格與下面的CSS按鈕：讓亮色梯度

background-image: linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%); 
background-image: -o-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%); 
background-image: -moz-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%); 
background-image: -webkit-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%); 
background-image: -ms-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%); 
background-image: -webkit-gradient(
linear, 
left bottom, 
left top, 
color-stop(0.41, rgb(112,166,30)), 
color-stop(0.71, rgb(150,222,42)) 
);

什麼簡便的方法來保持具有相同的顏色，但他們展示亮？基本上是在懸停輸入元素時改變樣式。

來源

2012-06-21 Hommer Smith

使用a：hover psuedo class？ – TheZ

這不會顯示出更亮的顏色......我要求提供最簡單，最乾淨的維護類似CSS的方法，但要更明亮地顯示顏色。 –

除非你想使用CSS預處理器，否則沒有「自動」的方法。 – thirtydot

使用CSS3，您現在可以使用更有趣的顏色模型：HSL其中L是光。當你想讓顏色的亮度變化時，這是一個很好的模型。如果你想讓它變得更加明亮（不會因爲使用白色層而變得更蒼白），這就是要走的路。如果你不想改變你的CSS，你將不得不編碼。例如，您可以讀取和解析css顏色（使用jquery css function），並在懸停對象時將其動態設置爲不同的燈組件值。

但是，如果您有很多顏色和漸變，最好的解決方案可能是使用動態樣式表，如less，其中您可以簡單地定義2個（或更多）亮度值以包含在您的css規則中。

來源

2012-06-21 17:30:09

您的雲在您的漸變元素後面有一個白色背景元素（將當前代碼封裝在div或其他內容中），然後更改懸停時顏色的不透明度。否則，您將需要完全不同的顏色。

希望有所幫助。 :)

來源

2012-06-21 17:31:24 KruegerDesigns

使用兩類：

.button { 
... your existing css 
}

然後使用一套獨立的顏色爲：懸停

.button:hover { 
... your existing css with different colours 
}

你居然使用CSS設置不同的顏色值。

這裏有一個方便的工具：http://www.colorzilla.com/gradient-editor/

來源

2012-06-21 17:31:35

感謝您的回答。我基本上是想知道什麼是一種簡單的方式來說：相同的顏色，但更明亮。我認爲我需要選擇顏色，並且沒有簡單的方法來說「更亮10％」。 –

相同的顏色但「更亮」實際上是不同的顏色代碼。 –

回答

相關問題