CSS3漸變和背景圖片

我有一個函數，當一個複選框的狀態發生變化時，它會切換其父代的類以給出不同的背景漸變。點擊Lorem看看它在行動CSS3漸變和背景圖片

問題是，它不會在我的例子中的較大的框中工作，因爲有一個背景圖像爲我的元素指定，我知道一個漸變不能存在於背景圖像相同的空間。

有沒有一種解決方法爲此添加背景漸變到元素？我無法將其添加到圖像中，因爲這將會動態填充，並且並非所有圖像都具有相同的尺寸。

我不介意改變任何HTML/CSS。如果可以用jQuery來完成，那太棒了:)

2011-02-25 Kyle

CSS 3中的漸變實際上只是一個生成的圖像。所以如果你的瀏覽器支持多種背景（使用Modenizr來測試），那麼你可以添加2個背景圖片。像：

.multiplebgs.cssgradients .button { 
    background-image: url("img.png"), -webkit-gradient(linear, left top, left bottom, from(rgba(247,148,34,0)), to(#dc7703)); 
    background-image: url("img.png"), -webkit-linear-gradient(-90deg, rgba(247,148,34,0), #dc7703); 
    background-image: url("img.png"), -moz-linear-gradient(-90deg, rgba(247,148,34,0), #dc7703); 
    background-image: url("img.png"), linear-gradient(-90deg, rgba(247,148,34,0), #dc7703); 
}

來源

2011-02-25 13:58:14 Tokimon

啊哈，這個作品！現在只需將其添加到jQuery功能:)謝謝。 – Kyle 2011-02-25 14:02:27

更新：我似乎無法設法將其寫入複選框更改。我希望我從錯誤的角度來看待它，我應該設置CSS本身，而不是改變類。但你的答案只要混合圖像和漸變，謝謝:) – Kyle 2011-02-25 14:11:40

它應該是可能的只是chaning類。這是推薦做的事情，它給你更多的自由，我造型 – Tokimon 2011-02-26 13:40:43

你可以在背景圖像的元素周圍添加另一個div，並對其應用漸變。只要圖像透明，漸變就會顯示出來。

<div id="div-with-gradient"> 
    <div id="div-with-image"> 
     <!-- content --> 
    </div> 
</div>

來源

2011-02-25 13:51:36

CSS3漸變和背景圖片

回答

相關問題