0

写真を白くフェードさせたい。私はマスクを使用して目的の効果を得ましたhttp://jsfiddle.net/jspence29/8bDMp/しかし、問題は、画像がページ全体（高さは気にしない幅）をカバーするようにしたいことです。ウィンドウのサイズを変更します。背景サイズのようなもの：カバー; 。でも、背景にマスクを入れることができないので、それはできません。また、HTMLに100％の幅を入れると、画面に対して大きくなりすぎます。だから私はこれを修正する方法があるのだろうか、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 に答える