Using CSS Sprites on anchor tags

2019-04-27 10:26发布

站内问答 / HTML/CSS
1409 3 6

I'm looking for some CSS guru advice on best structure. I'm implementing sprites instead of icons on a horizontal 'list'. Current html is like :

<a href="link"><img src="icon" /></a><a href="link_b"><img src="icon"/></a>

etc.

So I replace with a sprite. I'm using 

<a href="link" class="sprite_img_a"></a><a href="link_b" class="sprite_img_b"></a>

but to do this I give the tag inline-block and width. I've never liked inline-block and it seems clunky.

Are there better options ? (nested span, div wrapper ?)

3条回答
淡お忘
2楼-- · 2019-04-27 10:38

I like your techniques @sandeep and @hatake-kakashi. A couple possible improvements (though maybe beyond the scope of the question). Try structuring your list and html as such:

<style>
/* let your UL and LI handle the link positioning */
ul.sprites {width:somevalue;} /* <--clearfix this someplace cause of the floats inside*/
ul.sprites li {float:left;} /* <- these should collapse to the 30x30 width of the children */
ul.sprites li a {
  display:block;
  /*sprite dimensions*/
  width:30px;
  height:30px;
  background: url('..images/spritesSheet.png') 0 0 no-repeat;
  /*hide link text*/
  text-indent: -9999em
  overflow: hidden;
  text-align: left;
}

/*adjust the background of the single sprite image file*/
ul.sprites a.spriteName1 {background-position:x y;}
ul.sprites a.spriteName1:hover {background-position:x y;}
ul.sprites a.spriteName2 {background-position:x y;}
ul.sprites a.spriteName2:hover {background-position:x y;}
/* etc...*/

</style>
<html>
<ul class="sprites">
    <li><a class="spriteName1" href="#">link1</a></li>
    <li><a class="spriteName2" href="#">link2</a></li>
</ul>
</html>

This way, the cascade works for you and all links in this list can get the sprite styling without redundant class names. And you let your parent elements handle the positioning. At least, I think that's correct. Apologies for syntax and pseudo-code as I wrote it kinda quick and dirty.

查看更多
0人赞 添加讨论(0) 举报
混吃等死
3楼-- · 2019-04-27 10:44

I usually do like this:

<a class="button sprite" href="#"><span class="sprite">Blah</span></a>

Here is the css:

.sprite{
    background: url("../images/sprite.png") no-repeat scroll left top transparent;
}
.button{
    background-position: 0 -80px;
    color: white;
    display: block;
    float: left;
    font-size: 0.75em;
    height: 28px;
    line-height: 28px;
    margin-top: 7px;
    overflow: hidden;
    padding-left: 5px;
    text-decoration: none;
    cursor: pointer;
}
.button span{
    background-position: right -80px;
    height: 28px;
    color: white;
    display: block;
    float: left;
    padding: 0 10px 0 5px;
    position: relative;
    text-transform: uppercase;
    text-decoration: none;
}
查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
4楼-- · 2019-04-27 10:50

@karishma: inline-block is a good option but if don't want it so, you can use the CSS below. 

a.sprite_img_a{
  background:url('image.jpg') no-repeat 0 0 ;
  float:left;
  display:block;
  width:30px;
  height:30px;
}
a.sprite_img_a:hover{
  background-position:-20px 10px ;
}

It's good to use icon image in background because 1) it saves markup space & 2) it's good for SEO purposes to avoid unwanted images caches by Google.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)