使用spritesとIMGタグ?

StackOverflow https://stackoverflow.com/questions/4335957

質問

について?解決方法を利用spritesしい"src属性に必要なのためのIMGタグ?私は常に使う長いスパン又はその他のタグセットの背景-幅等ができな意味的に正しい。

基本的には思を省略するか、SRCのためのIMGタグといった、状況に応じた使い分けspritesが心配ですが、HTMLな技術的に効くようになっています。感謝。

役に立ちましたか？

解決

意味的正しさについて：

画像に意味的な意味がある場合、 したがって、それはコンテンツと見なされます、 IMGタグを使用します, 、スプライトなしで、ALTを正しくセットアップします。

画像が単なる装飾であるとき、 ボックスの背景、ボタンの背景、メニューオプションの背景などのように、それは意味的な意味を持たないので、あなただけができます 背景として使用します CSSからのスパン、Divなどの。この場合、スプライトを使用できます。

他のヒント

スプライトを使用すると、必ずしも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の両方のメソッドには確かに独自の利点があるため、どちらが自分に適しているかを把握する必要があります。

SRCには、1x1透明性GIF（いわゆるスペーサー）を使用しています。次に、対応するBG位置でそのIMGタグの背景画像を設定します。このようにして、スプライトの速度を利用し、コードのセマンティックを保持しています（Alt属性を使用できます）

私は常に使う長いスパン又はその他のタグセットの背景-幅等ができな意味的に正しい

実際にある約CSSの設定の背景には、スパンまたは事業部いという誤った構文上を省srcから、イメージとしては、全点のタグです。ある基準というテキスト内スなサービスを提供しています。構文上に言うと、変更の背景、要素の"正しい"について教えてください。

ここでは、refには、imgタグでW3C: 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だけでなく、ユーザーます。

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

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

aで定義された領域を作成します <a> と display:block; また <div> そして使用します overflow hidden; オーバーフローを隠すために position:relative;.

それからあなたはあなたを置きます <img> 画像スプライトは絶対に配置されています。これは、親を配置してから可能です。

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

これであなたのスプライトはIMGタグに基づいているので、あなたはあなたを使用することができます alt 文章。

次の例は、2つのバージョンのアイコンが互いに上にあるFacebookスプライトに基づいています。各50px x 50px、画像の合計高さは100pxです。

<!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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top