0

我想让一张照片淡化成白色。我使用了蒙版并获得了预期的效果http://jsfiddle.net/jspence29/8bDMp/但问题是我想让图像覆盖整个页面(宽度我不关心高度),即使你调整窗口大小。像背景大小:封面;. 但我不能这样做,因为你不能把面具放到背景中。如果我将 100% 的宽度放入 html 中,它对于屏幕来说就太大了。所以我想知道是否有办法解决这个问题,javascript或jquery之类的。谢谢!

<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>
4

1 回答 1

0

将宽度设置为 100% 对我来说很好。添加 width: 100%;#background img

http://jsfiddle.net/8bDMp/1/

于 2012-11-18T18:43:45.887 回答