gpt4 book ai didi

html - 图像复制自己

转载 作者:太空宇宙 更新时间:2023-11-04 12:02:11 25 4
gpt4 key购买 nike

这里的新手试图学习 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 <- css Sprite 。 fiddle :jsfiddle.net/7oxrmj2z

最佳答案

验证后发现问题。

问题在于我没有添加结束标签:

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

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

图像不再 self 复制。

关于html - 图像复制自己,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29674052/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com