0

Chrome で CSS を使用して画像の下に反映させたい画像があります。画像は div 内にあり、画像の最大高さと最大幅を制限しました。

反射した画像は、画像の下部ではなく画像の上部を示しています。

実際の例へのリンクは次のとおりです。

コードは次のとおりです。

<!DOCTYPE HTML>
<html>
 <head>
  <style>
    img{   
      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));
      max-height:315px;max-width: 220px;
    }
    div{overflow:hidden;height:275px;border:1px solid green}</style>
 </head>

 <body>
  <div>
     <img src="http://www.oracledigital.com.au/wp-content/uploads/2012/05/google-penguin-update.png" />
  </div>
  </body>
</html>

誰でもこの問題を解決できますか?

4

3 に答える 3

0

画像のサイズを縮小する必要があります。

デモを見る

于 2012-08-09T07:37:54.193 に答える
0

は<div>、反射イメージがどこに向かうかを制限します。heightピクセル単位のセットを使用するとoverflow:hidden、どこにも移動できないため、反映された画像が上に移動して収まります。HTML<div>タグを一時的に削除して、意味を確認してください。（または削除overflow:hidden）。

これはあなたが望んでいたものですか？

http://jsfiddle.net/8a8NU/

を削除して 80% にoverflow:hidden変更しただけです。color-stop

于 2012-08-09T07:01:49.310 に答える
0

http://jsfiddle.net/TYfh9/3/

デモ

<div> 
  <img src="http://www.oracledigital.com.au/wp-content/uploads/2012/05/google-penguin-update.png" class="reflectBelow" />
</div>​

CSS

.reflectBelow  { 
  -webkit-box-reflect: below 0
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); 
}
于 2012-08-09T07:21:31.253 に答える