使用spritesとIMGタグ?
-
30-09-2019 - |
質問
について?解決方法を利用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だけでなく、ユーザーます。
オプションを再考することでこれを解決します。
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>