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

このレッスンでは、画像ソースを変更せずに、CSSを使用して画像ギャラリーを装飾する方法を紹介します。ここで使用されるテクニックも非常に簡単です。画像の前に を作成し、そのスパンで 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 ファイルをダウンロードし、ページの タグに次のコードを追加します。

<!--[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>

#1. シンプルなギャラリー

先ほど紹介したテクニックを使ってギャラリーを作成してみましょう。

#1b. ミニアイコン

この例は、画像上にさまざまなアイコンを配置する方法を示しています。 SPAN タグに異なる CSS class 名を設定する必要があります。

#2. テキスト付きの画像

この例は、テキストリンク付きのギャラリーを作成する方法を示しています。

#2b. ポップアップテキスト

#3. ミニペーパークリップ

#4. コルクボードギャラリー

sIFR版（テキスト置換）

at このバージョンでは、sIFRを使用してem内のテキストを手書きに置き換えます。

#4b.テープエフェクト

#5.ブラックフレームアートギャラリー

#5b.プノンペンアートギャラリー

#6.水彩効果

sIFRバージョン

#7. ハイライト効果

#8. 木の板ギャラリー

最後に、背景画像を使用して木の板の効果を実現する方法を示します。

この CSS 手法は非常に柔軟で、写真と CSS を有機的に組み合わせていることがわかります。この方法を使用して、さまざまなスタイルで独自のギャラリーを作成することもできます。

以上がCSS を使用して画像ギャラリーを装飾するための HTML5 実践コード共有 (1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。