webkit蒙板蓋

我想讓圖片漸變爲白色。我已經使用了蒙版並獲得了所需的效果http://jsfiddle.net/jspence29/8bDMp/但問題是我想讓圖像覆蓋整個頁面（寬度我不在乎高度），即使在調整窗口大小時也是如此。像背景大小的東西：封面; 。但是我不能那樣做，因爲你不能把面具放到背景中。如果我把100％的寬度放到html中，它對於屏幕來說就變得太大了。所以我想知道是否有解決這個問題，JavaScript或jQuery或什麼的。謝謝！webkit蒙板蓋

<html> 
<head> 
<title> 
Singapore - gallery 
</title> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<meta name="viewport" content="width=device-width, initial scale=1.0"> 
<style> 
* { 

    margin: 0; 
    padding: 0; 

} 
#background img { 

    -webkit-mask-image: 
    -webkit-gradient(linear, left top, left bottom, 
     from(rgba(0,0,0,1)), 
     to(rgba(0,0,0,0))) 
} 
</style> 
</head> 
<body> 
<div id="background"> <img src="gallery.jpg" /></div> 
</body>

來源

2012-11-18 user1815176