1

私はデザインの初心者で、前景画像の代わりに背景の使用を検討しています。これは一般的な方法です。

使用されている手法を見て、次のことがわかります。

  • 通常、画像のサイズを明示的に指定する必要があります（そして、前景要素をこれらのサイズに設定します）
  • どういうわけかcssトリックで前景要素を消す必要があります。これはすべて本当にハックっぽく見えます。それで、なぜ、ネイティブ要素を使用するのではなく、一体なぜこれをすべて行うのだろうか？良い答えがあると確信しています

（IMGとCSSの背景画像をいつ使用するかを確認しましたが、明確な答えがわかりませんでした）

4

4 に答える 4

3

画像に CSS を使用する利点として考慮すべきことの 1 つは、スプライトを使用して個々の画像ごとに http リクエストを行うのではなく、1 つの http リクエストですべてのデザイン画像 (UI 要素の画像など) をロードできることです。すべての画像のグリッドを含む 1 つの大きな画像。

前に述べたように、コンテンツ画像には img タグを使用する必要があります。これは、サイト/アプリにアクセスするときにさまざまなアクセシビリティ オプションを使用する人々にも役立ちます。たとえば、スクリーンリーダーを使用している場合、スクリーンリーダーはそれが画像であることを認識しており、img の代替名またはタイトルを読み取ることができますが、背景画像のある div のみの場合は何も取得しません。

于 2012-09-24T22:44:28.277 に答える
2

目標は、コンテンツをプレゼンテーションから分離することです。HTML にはコンテンツのみを含める必要があり、すべてのプレゼンテーションは CSS に移動する必要があります。それを達成すると、いくつかの有用な副作用が得られます。

  • CSS (プレゼンテーション コード) はユーザーのブラウザーによってキャッシュされ、要求された各 HTML ファイルは小さくなります。これには、SEO の利点もあります (コードの毛羽立ちの減少)。
  • 視覚障害のあるユーザーのためにページを解釈する際に、スクリーン リーダーが混乱することが少なくなります。HTML にコンテンツのみが含まれるようにすることは、視覚障害のあるユーザーが探しているものにすばやく到達できることを意味します。
  • CSS を使用すると、同じコンテンツをさまざまな視覚的構成で表示できます。これは、レスポンシブ Web デザインの動きの基礎となっています。コンテンツとプレゼンテーションを適切に描写することは、複数のプラットフォーム (デスクトップ、タブレット、スマートフォン) で同じ HTML ファイルを使用できることを意味します。

ただし、画像が特定のページのコンテンツである場合があります。そのような場合、タグを使用したいのですがIMG、画像を CSS に移動するのは実際には間違った方法です。いつ、どこでテキストから画像への置換を使用するかについての優れた議論は、When to use IMG vs. CSS background-image? にあります。基本的に、私の個人的なリトマス試験紙は次のようなものです。この画像はサイトで複数回使用される予定ですか? もしそうなら、それはおそらく設計の一部です。1 回限りの画像は通常、コンテンツです。

デザイン イメージを CSS に移行することを検討している場合は、おめでとうございます :-p かなりの量の作業を採用しましたが、Web エコシステムの一部として、Web サイトの長期的な健全性にとって価値のあることを始めました。SASS/Compassシステムを使用して、デザイン画像をスプライトとして管理することを検討することを強くお勧めします ( A List Apart:CSS Sprites and Spriting with Compassを参照)。

于 2012-09-24T22:42:53.247 に答える
2

主な違いは、imgタグ内でイメージがハードコーディングされていることです。

CSS を使用すると、ソース コードを変更することなく、さまざまなデザインを作成したり、それらを切り替えたり、ページを再デザインしたりできます。CSS の威力を確認するには、http: //www.csszengarden.com/ を確認してください。すべてのページで同じ HTML ソースが使用されていますが、CSS レイアウトは異なります。

@Shmiddty が指摘したように、ifimgは埋め込み画像 (実際のコンテンツ、たとえばギャラリーや記事の画像) 用であり、CSS はデザイン用です。

また、あなたが言及した質問には、すべてのユースケースの素晴らしいリストがあります: When to use CSS background-image.

于 2012-09-24T22:39:12.973 に答える
0

画像置換の主なポイントの 1 つは、サイトのタイトルをh1タグで使用して SEO を改善し、テキストを非表示にしてカスタム ロゴに置き換えることです。

これにより、サイトのアクセシビリティも向上します。たとえば、ユーザーが何らかの理由 (スクリーンリーダーなど) で CSS を無効にしているとします。通常のユーザーにはカスタム グラフィックが表示されますが、ユーザーにはサイト タイトルのテキスト表現が表示されます。

于 2012-09-24T22:41:30.977 に答える