Question

这里的新手试图学习基本的CSS-sprites，现在我花了一些时间来解决这个问题而无法完成任务。

我的问题是从CSS-sprite获取的图像是自身复制的。也许你可以发现问题。

    <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="oneColFixCtr.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="container">
  <div class="content">
    <h1>CSS Sprites</h1>

   <img src="sammansattbild1.png"/>


   <ul id="test1">
   <li>
<a class="item0" href="#" title=""/>
</li>
Original Bild



   </ul>
   <ul id="test2">

<li>
<a class="item05" href="#" title=""/>
</li>
PNG Bild, 4,3 BBP


   </ul>
   <ul id="test">

<li>
<a class="item1" href="#" title=""/>
</li>
JPEG 4 BPP
<li>
<a class="item2" href="#" title=""/>
</li>
2 BPP
<li>
<a class="item3" href="#" title=""/>
</li>
1 BPP
<li>
<a class="item4" href="#" title=""/>
</li>
0,5 BPP
<li>
<a class="item5" href="#" title=""/>
</li>
0,25 BPP
</ul>
    <!-- end .content --></div>
  <!-- end .container --></div>
</body>
</html>

CSS文件：

* { margin: 0; padding: 0; }


#test { width: 128px; margin: 20px auto; }

#test li {
    list-style-type:none;
    font-size:1em;
}

#test li a {
    background-image:url('sammansattbild1.png');
    background-repeat:no-repeat;
    display: block;
    height: 180px;
}


#test1 { width: 128px;
position:absolute;
 }

#test1 li {

    font-size:1em;
}

#test1 li a {
    background-image:url('sammansattbild1.png');
    background-repeat:no-repeat;
    display: block;
    height: 180px;
}

#test2 { width: 128px;
position:absolute;
margin-left:160px; }

#test2 li {
    font-size:1em;
}

#test2 li a {
    background-image:url('sammansattbild1.png');
    background-repeat:no-repeat;
    display: block;
    height: 180px;
}

#test1 li a.item0 {background-position:0px 0px;}


#test2 li a.item05 {background-position:-160px 0px;}
#test2 li a:hover.item05 {background-position:0px 0px;}


#test li a.item1 {background-position:-100 0px;}
#test li a:hover.item1 {background-position:0px 0px;}


#test li a.item2 {background-position:-480px 0px;}
#test li a:hover.item2 {background-position:0px 0px;}

#test li a.item3 {background-position:-660px 0px;}
#test li a:hover.item3 {background-position:0px 0px;}

#test li a.item4 {background-position:-800px 0px;}
#test li a:hover.item4 {background-position:0px 0px;}

#test li a.item5 {background-position:-960px 0px;}
#test li a:hover.item5 {background-position:0px 0px;}

/感谢

编辑：图片需要：http://i.imgur.com/bW2AQNA.png

kcmello.imgur.com/all＆lt; - css sprit。小提琴：jsfiddle.net/7oxrmj2z

Answer 1

我在验证后发现了问题。

问题在于我没有添加结束标记：

<a class="item1" href="#" title=""/>

添加后：<a class="item1" href="#" title=""></a>

图像停止复制。

Answer 2

我不知道你想要什么，以及你的问题究竟是什么，但我认为你的代码显示的是sammansattbild1.png图片的四倍：

1）

<div class="container">
  <div class="content">
    <h1>CSS Sprites</h1>

    <img src="sammansattbild1.png"/>

2）

#test li a {
    background-image:url('sammansattbild1.png');

3）

#test1 li a {
    background-image:url('sammansattbild1.png');

4）

#test2 li a {
    background-image:url('sammansattbild1.png');

所以这里有你的形象的四种情感。

我希望这能回答你的问题。

图像重复自己

2 个答案: