文章/答案/技术大牛

发布

社区首页 >问答首页 >镜像会自我复制

问镜像会自我复制
EN

Stack Overflow用户

提问于 2015-04-16 19:59:09

回答 2查看 73关注 0票数 0

这里有个新手在尝试学习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-file：

* { 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;}

/thanks

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

kcmello.imgur.com/all <- css sprit.小提琴: jsfiddle.net/7oxrmj2z

css

html

回答 2

Stack Overflow用户

发布于 2015-04-16 20:29:16

我在验证后发现了这个问题。

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

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

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

这些图像停止了自我复制。

票数 1

Stack Overflow用户

发布于 2015-04-16 20:07:09

我不知道你想要什么，也不知道你的问题到底是什么，但我认为你的代码显示了四次sammansattbild1.png图片：

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

    <img src="sammansattbild1.png"/>

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

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

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

所以这里你有你的图像的四个曲线。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29674052

复制

相似问题

问镜像会自我复制
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问镜像会自我复制EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问镜像会自我复制
EN