发表新帖
发表新帖

Using sprites with IMG tag?

后端 未结
关注
6 1417
余生分开走
余生分开走 2020-11-29 23:26

I understand how to use sprites, however, isn\'t a \"src\" attribute required for IMG tags? I could always use a SPAN or other tag and set the background/width/etc but it wo

相关标签:
6条回答
  • 长情又很酷
    2020-11-30 00:01

    Using sprites doesn't necessarily mean you need to define them in css backgrounds. You can also use IMG tag sprites, to do so you need basically trim your image. There are two good articles explaining that technique:

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

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

    Both CSS and IMG methods sure have their own benefits, so you need to figure out which one suits you better.

    0 讨论(0)
  • 被撕碎了的回忆
    2020-11-30 00:04

    You can either use CSS backgrounds, or HTML Canvas elements to dynamically draw upon. With canvas's you have the ability to easily subset images and perform blend mode effects.

    0 讨论(0)
  • 误落风尘
    2020-11-30 00:21

    I could always use a SPAN or other tag and set the background/width/etc but it won't be semantically correct

    Actually there is nothing wrong about using CSS to set the background of a span or div. It would actually be incorrect syntactically to omit the src from an image, as that is the whole point of the tag. There is nothing in the standards saying you have to put text inside a span. Syntactically speaking, modifying the background on an element would be the most "correct" way to do it.

    Here is the ref on img tags over at W3C: http://www.w3.org/TR/html401/struct/objects.html#h-13.2

    And a little extra reading: http://www.w3.org/TR/html4/struct/global.html#h-7.5.3

    These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

    0 讨论(0)
  • 深忆病人
    2020-11-30 00:22

    You solve this by re-thinking your options.

    You create a defined area with a <a> with display:block; or <div> and use overflow hidden; to hide overflow and position:relative;.

    Then you place your <img> image sprite inside absolutely positioned, which is possible since you positioned the parent.

    Then use :hover on the image to change position.

    Now your sprite is based on an img tag, so you can use your alt text.

    Following example is based on a Facebook sprite with two versions of the icon on top of each other, each 50px by 50px, total height of image being 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>
    0 讨论(0)
  • 面向向阳花
    2020-11-30 00:23

    About semantical correctness:

    When an image has semantical meaning, so it is considered to be content, use an IMG tag, without sprites, and a correctly set up ALT.

    When an image is just decoration, like the background of a box, background of a button, background of a menu option, etc., it has no semantical meaning, so you can just use it as a background of a SPAN, DIV, etc. from CSS. You can use sprites in this case.

    0 讨论(0)
  • 遥遥无期
    2020-11-30 00:23

    I use a 1x1 transparent gif (so called spacer) for the src. then set the background image for that img tag with the corresponding bg position. this way you're utilizing the speed of sprites and keeping the semantic of your code (you can still use the alt attribute)

    0 讨论(0)
 看不清?
提交回复
热议问题