Can't get CSS Sprite to work..what am I doing

I am using CSS Sprite Generator to create sprites for a web page I am working on, but it doesn't seem to work, and I don't know why...I guess it's something obvious but..!

So, I picked up 3 images, zipped, generated the PNG file (I checked out the result it is seems fine) and I got the following css classes back:

.sprite-welcom1 { background-position: 0 -30px; } 
.sprite-welcom3 { background-position: 0 -109px; } 
.sprite-3 { background-position: 0 -188px; }

So here is the HTML I am testing on, and for some reason all I get is a nice blank page:

<html>
<head>
    <style>
    .sprite-welcom1 { background-position: 0 -30px; } 
    .sprite-welcom3 { background-position: 0 -109px; } 
    .sprite-3 { background-position: 0 -188px; } 

    .sprite-bg {
       background: url(csg-495a902b04181.png) no-repeat top left;
    }
    </style>
</head>
<body>
    <div class="sprite-bg sprite-3"></div>
</body>
</html>

Any tips?

标签： html css sprite css-sprites

8条回答

Evening l夕情丶

2楼-- · 2019-04-13 06:40

For some reason, Firefox 3 sometimes wants 2 classes in the CSS Selector to make the sprite map work. My hunch is that the rules of specificity are causing problems while the sprite map loads. By adding the additional class, it works correctly.

/* Bad  */ .childClass2 { background-position: -10px -20px; }
/* Good */ .parentClass1 .childClass2 { background-position: -10px -20px; }

It's always good to “namespace” your CSS with a parentClass, to avoid unexpectedly styling a DOM tag someplace else. Here are some additional enhancements to everyones ideas from above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
    .sprite-container div {
       background: transparent url(//www.yourDomain.com/csg-495a902b04181.png) no-repeat scroll 0 0;
       width: 200px; /* width is necessary */
       height: 20px; /* height is necessary */
    }
    .sprite-container .sprite-3 { background-position: 0 -188px; } 
    .sprite-container .sprite-4 { background-position: -20px -188px; }
    </style>
</head>
<body>
    <div class="sprite-container">
      <div class="sprite-3"></div> 
      <div class="sprite-4"></div> 
      <!-- Empty divs are fine! Unless you *really* want text on top of
           your sprite map. :o) Btw: &shy; is invisible when a hyperlink
           is wrapped around it. &nbsp is not... it creates an 
           underscored hyperlink. Use &shy; which is a soft-hyphen.
       -->
    </div>
</body>
</html>

This code works in: IE 7, Firefox 3, Google Chrome 1, Opera 9 & Safari 3.

Tip: Avoiding http:// in the URL will allow the sprite map to be served up from both http:// and https:// connections.

(Scroll to the right to see the “no-repeat scroll 0 0;” )

0人赞添加讨论(0) 举报

老娘就宠你

3楼-- · 2019-04-13 06:41

Define a width and height for <div class="sprite-bg sprite-3">.

0人赞添加讨论(0) 举报

我想做一个坏孩纸

4楼-- · 2019-04-13 06:44

Hrm, not quite sure what you're trying to achieve here. The multiclassing seems a bit messy. I've posted my method of spritemaps below, see if this does what you need. Usually this involves a combination of elements, the most common being an unordered list with links for navigation, but for this purpose it's just divs.

Also don't forget the order of background-position. background-position: |top| |left|;

That's screwed me up a couple of times. Finally, A List Apart has a great article on Sprite Maps (http://www.alistapart.com/articles/sprites/)

<html>
<head>
    <style>
    .sprite-container div {
       background: url(csg-495a902b04181.png) top left no-repeat;
       width: 20px; //width is neccessary
       height: 20px; //height is neccessary
    }

    .sprite-3 { background-position: 0 -188px; } 
    .sprite-4 { background-position: -20px -188px; }

    </style>
</head>
<body>
    <div class="sprite-container">
      <div class="sprite-3"></div>
      <div class="sprite-4"></div>
    </div>
</body>
</html>

0人赞添加讨论(0) 举报

迷人小祖宗

5楼-- · 2019-04-13 06:47

You have to declare a height and width for the div element. That's it.

0人赞添加讨论(0) 举报

爷、活的狠高调

6楼-- · 2019-04-13 06:48

Your .sprite-bg rule for background-position, set as part of the composite rule for background (the top left part), has higher precedence than the stand-alone background-position setting for .sprite-3 because it appears later in the stylesheet.

Place the rule for .sprite-bg first.

0人赞添加讨论(0) 举报

萌系小妹纸

7楼-- · 2019-04-13 06:48

As others have mentioned, your sprite-bg element needs to have either some content to give it a height / width, or have those properties specified in the css, thusly:

.sprite-bg {
  background: url(csg-495a902b04181.png) no-repeat top left;
  width: 100px; /* (or whatever the width should be) */
  height: 100px; /* (or whatever the height should be) */
}

As someone else mentioned, I'd move the rules for the .sprite-welcom1, .sprite-welcom3 and .sprite-3 to beneath the main .sprite-bg in the stylesheet.

0人赞添加讨论(0) 举报

1 2 下一页

Can't get CSS Sprite to work..what am I doing

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间