3

ギャラリーの各画像に影を追加しようとしています。各要素に CSS シャドウを追加できることはわかっていますが、写真の下に追加しようとしているシャドウは PSD レイアウトから取得され、CSS シャドウとは異なる形状をしています。

ここに私が達成しようとしているサンプルがあります： ここに画像の説明を入力

そして、私が今までやったこと：

      <div style="padding-left: 15px; position:absolute;">
        <img src="avatar.png" alt="" />
        <img src="shadow.png" alt="" style="margin: 190px 0 0 -191px; width: 187px;" />
      </div>

これはひどい解決策であり、さらに、Chrome でしか機能していません。すべてのブラウザでより効率的かつ実行可能にする方法を教えてください。

4

4 に答える 4

3

画像が不規則なサイズになる場合は、背景画像としての SVG が探しているものです。Adobe Illustrator ($$$) または Inkscape (無料) を使用して、異常な形の影を SVG ファイルとして作成できます。そこから、必要なのは次の CSS だけです。

.myImage {
    background: url(myShadow.svg) no-repeat;
    background-size: 100% 100%;
    padding: ? ? ? ?; // the values will have to depend on your bg image
}

詳細な説明はこちらにあります: http://designfestival.com/a-farewell-to-css3-gradients/

画像がすべて同じサイズであるか、サイズ変更時に発生する可能性のある粒状性を気にしない場合は、背景として PNG を使用しても問題ありません。

于 2012-12-29T20:11:12.487 に答える
2

影効果用の透明な PNG を作成し、それを背景画像として div に配置できます。次に、その div に画像を追加して、css で配置できます。

このソリューションは、透明なpngで動作する場合、IE6でも、すべてのブラウザーで動作します。

お役に立てれば。

于 2012-12-29T18:23:47.917 に答える
1

これは、その特定のブラウザではサポートされていないためです。あなたが行方不明かもしれませんvendor-prefix

Opera 10.50 (現在は Windows でのみ利用可能) は、ベンダー プレフィックスのない実装を持つ最初の Web ブラウザーですが、Firefox、Safari、Google Chrome はすべて今のところ必要です。したがって、このコードにより、これらすべての Web ブラウザーで動作します。

.shadow {
    -moz-box-shadow: 3px 3px 4px #000; 
    -webkit-box-shadow: 3px 3px 4px #000; 
    box-shadow: 3px 3px 4px #000;
}

さらに、これらのリンクを参照できます

すべての Web ブラウザーの CSS を使用したドロップ シャドウ

ボックスの影

于 2012-12-29T18:19:52.637 に答える
1

これはより一般的な解決策ですが、他の人にも役立つかもしれません。<head>HTMLのセクションに以下を追加しました。

<style>
img {{box-shadow: 5px 5px 5px #888888; }}
</style>

すべての画像に影を追加するのに最適でした。

于 2016-11-21T18:53:29.057 に答える