ホームページ > 記事 > ウェブフロントエンド > CSS を使用して画像ギャラリーを装飾するための HTML5 実践コード共有 (1)

CSS を使用して画像ギャラリーを装飾するための HTML5 実践コード共有 (1)

黄舟オリジナル: 2017-03-23 15:45:001974ブラウズ

このレッスンでは、画像ソースを変更せずに、CSSを使用して画像ギャラリーを装飾する方法を紹介します。ここで使用されるテクニックも非常に簡単です。画像の前に 45a2772a6b6107b401db3c9b82c049c2 を作成し、そのスパンで background-image を使用してマスク効果を生成します。この方法はシンプルかつ柔軟です。デモでは 20 を超えるスタイルが紹介されていますので、参照してください。

この CSS テクニックの利点

時間の節約 — photoshop で画像テンプレートを作成し、画像ごとに個別のファイルを生成する必要がありません。
元の画像ソースを保持します — 将来画像テーマを変更する必要があるときに、元の画像がないことを心配する必要はありません。まったく改造していないからです。
非常に柔軟です - CSS を調整するだけで完全に異なるスタイルに変更できます。
どのサイトでも機能します — この CSS トリックは、どのサイトでも、どのような画像サイズでも機能します。
ブラウザの互換性問題の解決 — ほとんどのブラウザ (Firefox、Safari、Opera、さらには奇妙な動作をする IE6) のテストに合格しました。

基本コンセプト

imgをラップするp内にspan要素を作成し、それにbackground-imageを適用してマスク効果を生成する必要があります。空のspanタグを挿入したくない場合は、javascriptを使用して動的に生成することができます。これについては後ほど紹介します。以下のコードは、それがどのように機能するかを示しています。

CSS コードの場合、注意する必要があるのは、p にposition:relative を設定し、span に設定する必要があることですposition:absolute。这样你就可以通过为span设置top和left属性，来任意摆布他在p中的位置了。

IE PNG ハック

透明な PNG 画像を機能させるにはie6 では、強力な iepngfix.htc ハックを使用する必要があります。 iepngfix.htc ファイルをダウンロードし、ページの 93f0f5c25f18dab9d176bd4f6de5d30e タグに次のコードを追加します。

<!--[if lt IE 7]>
<style type="text/css">

  .photo span { behavior: url(iepngfix.htc); }

</style>
<![endif]-->

外観

さまざまなスタイルの変更を実現するには、指定されたspan要素のCSSを変更するだけです。デモのソースコードをチェックすると、その秘密がわかります。

jquery解決策

空のspanタグをページに直接追加したくない場合は、次のjqueryコードを使用して動的にspanを追加できます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">$(document).ready(function(){                           
  //预添加 span 标签
  $(".photo a").prepend("<span></span>");
                                  
});</script>