JavascriptやCSS3で、画像の左右を背景にフェードアウトさせる方法はありますか？不透明度CSS3またはJSを使用して画像をフェードインしますか？

2012-01-24 Xtian

これはあなたを助けることができるかもしれません。 http://www.xhtml-lab.com/css/create-reflection-effect-using-css3 – laymanje

PNGイメージをイメージにオーバーレイして、目的の効果を得ることができます。 IEは、部分的に透明なPNG画像を適切にレンダリングしません。このブラウザでは、いくつかの回避策が必要です。 IE PNG Fix。最近のブラウザで

Demo here

、あなたは、この目的のためにCSS3 box-shadowプロパティを使用することができます。

CSS3 demo here

出典

2012-01-24 16:07:41

IE6にはPNGFixだけが必要です。他のすべてのバージョンのIEは、PNGでの透過表示をうまくレンダリングします。 –

IE7以上では.pngファイルが正しく処理されますが、そうではありませんか？ –

私は完全にはわかりません。 IE7で32ビットPNGサポートがまだ壊れていると言う人もいます（[wikipedia記事]（http://en.wikipedia.org/wiki/Portable_Network_Graphics#Web_browser_support_for_PNG）を参照してください） –

これがあなたに合っているかどうかはわかりませんが、背景色が堅かった場合は、画像の上端に中間色とソリッドカラーで透明になるように消える.pngファイルをフェードアップすることができますそれは背景に退色しているように見えます。

出典

2012-01-24 16:07:08

-1

私はどのような効果がjQueryまたはjQuery UIで提供されていますそうは思いません。 JavaScript解決方法を使用する場合は、サードパーティのプラグインを試す必要があります。

Cssまでは可能ですが、この機能のクロスブラウザサポートについてはわかりません。

出典

2012-01-24 16:07:58 ShankarSangoli

@downvoterではありません - これは投票されましたか？ – ShankarSangoli

<div style="position:relative;height:100px;width:100px"> 
    <div style="position:absolute;z-index:2;width:100%;height:100%;-moz-box-shadow: inset 0 0 5px 5px #fff;-webkit-box-shadow: inset 0 0 5px 5px #fff;box-shadow: inset 0 0 5px 5px #fff;"></div> 
    <img style="position:absolute;z-index:1"src="images/my100.png"></img> 
</div>

これは、白いフェードがすべての側にある原因となりました。 CSSここhttp://www.css3.info/preview/box-shadow/

出典

2012-01-24 16:08:35 Michael

IE 8以降ではサポートされていません。そして、あなたに多くのコントロールを与えるわけではありませんが、それは私が考えることができる唯一のCSSのことです。コードはちょっとしたものですが、私はあなたがそれを修正できると確信しています。私は通常、インラインスタイルを使用するのが好きではありません。なぜなら、あまりスケーラブルではないからです... – Michael

ああ...どのようにボックスシャドウを忘れることができますか？ –

これは、必ずしもこれが「背景にフェードイン」することを許しません。あなたが背景色を定義している場合（ほとんどの場所もそうだと思われます）、影を背景色と一致させることができます。これはうまくいくが、pngフェードを使うより良い方法があるだろう。私のソリューションとimgのフェードへの欠点は、クリックがまだ1つから次の順に転送される必要があるということです...迷惑な – Michael

をいくつかの箱の影をチェックアウト、私は直接要素や親要素に使用され、まだ子供に影響を与えることができます

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

を使用しました。それは素晴らしい！ウェブキットでのみ動作します。

出典

2013-12-12 22:17:32 light24bulbs

不透明度CSS3またはJSを使用して画像をフェードインしますか？

答えて

Demo here

CSS3 demo here

関連する問題