4

現時点では、次のイメージがあります。

ここに画像の説明を入力

私が求められたのは、この効果を与えることです:

ここに画像の説明を入力

背景色は忘れてください。下の画像の一部が反射していることに注意してください。同じ色のままですが、不透明なスタイルの効果が適用されています。

CSS3 で opacity と webkit-reflection を使用してみましたが、うまくいきませんでした。

動作しないため、そのコードを削除しました。元の画像が残っています。

.infrareporting_host_0 {
    background: url("../interface/infrareporting/hostLightGreen.png") no-repeat scroll 0 0 transparent;
}

思い出してください：

  • 表示されているものだけが必要です-画像全体が反射するのではなく、画像の下部が反射します
  • 反射画像のみの不透明度をフェードするにはどうすればよいですか? 通常の 1 つのままにしたいが、反射をフェードします。
  • クロスブラウザ ソリューションが最適です (atm はクロムでしか実行できません)。

アップデート

これまでのところ、私のコードはクロムでのみ正しく反映されていますが、不透明度は正しく機能していません。私はこれを持っています：

-webkit-box-reflect: below -3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
4

3 に答える 3

5

次のようにできます：

html :

<div class="image-block">
   <img src="http://i.stack.imgur.com/mbf9p.png" alt="" />
   <div class="reflection">
      <img src="http://i.stack.imgur.com/mbf9p.png" alt="" />
      <div class="overlay"></div>
   </div>
</div>​

css: 

.image-block { width:78px; margin:0px 10px; float:left; } 
.reflection { position:relative; } 
.reflection img { 
    -webkit-transform: scaleY(-1); 
       -moz-transform: scaleY(-1); 
        -ms-transform: scaleY(-1); 
         -o-transform: scaleY(-1); 
            transform: scaleY(-1); 
    filter: flipv; opacity:0.20; 
    filter: alpha(opacity='20'); 
} 
.overlay { position:absolute; top:0px; left:0px; width:78px; height:120px; 
    background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%); 
    background-image:   -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%); 
    background-image:     -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0))); 
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff); 
}

</p>

ここでライブデモをチェックしてください：デモ

于 2012-11-23T17:15:07.923 に答える
1

CSS 3 を使用できます。

.reflect  { 
  -webkit-box-reflect: below 0
  -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); 
}

または、このような代替案: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/cross-browser-css-reflections-glows-and-blurs/

于 2012-11-23T17:12:25.113 に答える
0

次のコードを使用します。

.infrareporting_host_0::before,
.infrareporting_host_0::after
{
  content: "";
  position: absolute;
  top: 100%;
  z-index: -1;
  width: inherit;
  height: inherit;
  display: block;
}
 
.infrareporting_host_0::before
{
  background: inherit;
}

詳細については、クロスブラウザーの CSS3 リフレクションを参照してください。

于 2012-11-23T17:09:30.673 に答える