62

スプライトの使い方は理解できたのですが、IMGタグに「src」属性は必須ではないでしょうか？いつでも SPAN またはその他のタグを使用して background/width/etc を設定できますが、意味的には正しくありません。

基本的にはIMGタグのSRCを省略してスプライトだけにしたいのですが、そのせいでHTMLが技術的に通用しないのではないかと心配です。ありがとう。

4

6 に答える 6

61

スプライトを使用しても、CSS バックグラウンドでスプライトを定義する必要があるとは限りません。IMG タグ スプライトを使用することもできます。そのためには、基本的に画像をトリミングする必要があります。その手法を説明する 2 つの優れた記事があります。

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp

http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

CSS と IMG の両方の方法には確かに独自の利点があるため、どちらが自分に適しているかを判断する必要があります。

于 2011-06-29T13:06:00.233 に答える
58

意味の正しさについて:

画像に意味的な意味があるため、コンテンツと見なされる場合は、スプライトを使用せずに IMG タグを使用し、ALT を正しく設定します。

ボックスの背景、ボタンの背景、メニュー オプションの背景など、画像が単なる装飾の場合、意味的な意味はありませんので、単にSPAN や DIV などの背景として使用できます。 . CSS から。この場合、スプライトを使用できます。

于 2010-12-02T15:08:51.107 に答える
7

src には 1x1 の透明な gif (いわゆるスペーサー) を使用します。次に、その img タグの背景画像を対応する bg 位置に設定します。このようにして、スプライトの速度を利用し、コードのセマンティックを維持しています (引き続き alt 属性を使用できます)。

于 2011-08-31T17:07:05.503 に答える
5

いつでも SPAN またはその他のタグを使用して background/width/etc を設定できますが、意味的には正しくありません

実際、スパンまたは div の背景を設定するために CSS を使用することには何の問題もありません。画像から src を省略するのは、実際には構文的に正しくありません。それがタグの要点だからです。スパン内にテキストを配置する必要があるという標準には何もありません。構文的に言えば、要素の背景を変更するのが最も「正しい」方法です。

W3C の img タグの参照は次のとおりです: http://www.w3.org/TR/html401/struct/objects.html#h-13.2

少し余分な読み物：http://www.w3.org/TR/html4/struct/global.html#h-7.5.3

これらの要素は、コンテンツをインライン (SPAN) またはブロックレベル (DIV) として定義しますが、コンテンツに他の表現方法を課すことはありません。したがって、作成者はこれらの要素をスタイル シートや lang 属性などと組み合わせて使用​​し、HTML を自分のニーズや好みに合わせることができます。

于 2010-12-02T14:26:19.287 に答える
3

CSS 背景またはHTML Canvas要素を使用して、動的に描画できます。キャンバスを使用すると、画像を簡単にサブセット化し、ブレンド モード効果を実行できます。

于 2010-12-02T14:36:01.457 に答える
1

オプションを再考することでこれを解決します。

またはを使用<a>して定義済み領域を作成し、オーバーフローを非表示にします。display:block;<div>overflow hidden;position:relative;

次に、<img>画像スプライトを絶対配置内に配置します。これは、親を配置したため可能です。

次に:hover、画像上で使用して位置を変更します。

スプライトは img タグに基づいているため、altテキストを使用できます。

次の例は、アイコンの 2 つのバージョンが重なり合った Facebook スプライトに基づいています。各バージョンは 50 ピクセル x 50 ピクセルで、画像の高さの合計は 100 ピクセルです。

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
    display:block;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
#fb {
    position:absolute;
    top:0;
    left:0;
}
#fb:hover {
    position:absolute;
    top:-50px;
    left:0;
}
</style>
</head>

<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
于 2014-05-11T23:28:08.273 に答える