Html 屏幕外的CSS精灵和链接
我对CSS完全是个新手——我只是一个iphone开发者，我想把一个主页放在一起推广我的应用程序，基本上只是一个背景图片，上面有到应用商店、facebook和twitter的链接 我从我的设计师那里收到了主页图像（jpeg，1400x776），并开始研究不同的方法来构建我的网站，而无需对该图像进行切片，因为这是我最不想做的事情，这就是我如何遇到CSS精灵的（确切地说是昨天）。我想做的是“屏蔽”图像的某些区域并添加链接，因此我使用以下代码“屏蔽”一些图标，以便我可以附加链接并使其“可点击”（如facebook、twitter链接等）。我的问题是，一旦我在一个较小的屏幕上查看了我的站点，虽然我确实看到了完整的图像，“链接”就在屏幕之外（好像不再“附加”到UI元素） My index.html：Html 屏幕外的CSS精灵和链接,html,css,web,sprite,Html,Css,Web,Sprite,我对CSS完全是个新手——我只是一个iphone开发者，我想把一个主页放在一起推广我的应用程序，基本上只是一个背景图片，上面有到应用商店、facebook和twitter的链接 我从我的设计师那里收到了主页图像（jpeg，1400x776），并开始研究不同的方法来构建我的网站，而无需对该图像进行切片，因为这是我最不想做的事情，这就是我如何遇到CSS精灵的（确切地说是昨天）。我想做的是“屏蔽”图像的某些区域并添加链接，因此我使用以下代码“屏蔽”一些图标，以便我可以附加链接并使其“可点击”（如fac
<head>
<title>Delengo Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="screen">
#skyline {
background: url(delengo.jpg);
background-repeat:no-repeat;
background-position: top center;
width: 100%;
height: 100%;
margin: -10px;
padding: 0px;
min-height: 800px;
}
#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#skyline li, #skyline a {height: 200px; display: block;}
#twitterlink {left: 1295px; top: 500px; width: 30px; height: 77px;}
</style>
</head>
<body>
<ul id="skyline">
<li id="twitterlink"><a href="http://twitter.com/#!/delengo"></a></li>
</ul>
</body>
</html>
德伦戈主页
#天际线{
背景：url（delengo.jpg）；
背景重复：无重复；
背景位置：上中；
宽度：100%；
身高：100%；
利润率：-10px；
填充：0px；
最小高度：800px；
}
#天际线li{边距：0；填充：0；列表样式：无；位置：绝对；顶部：0；}
#天际线li，#天际线a{高度：200px；显示：block；}
#twitterlink{左：1295px；顶：500px；宽：30px；高：77px；}
非常感谢 为了提高性能，CSS精灵被有选择地少用。它们不是用来“跳过切片”的。你可以用一些装饰性的按钮和图标制作一个精灵，但是你仍然需要剪切它们并在新的图像中重新定位它们。如果我理解正确，你认为你可以把你的html放在一个巨大的背景上，即使你找到了一种方法（！）我担心如果你想提升自己，它也不会有任何好处。（这一次，它是不灵活和流动的——这是肯定的。）
如果您已经是一名开发人员，那么CSS可能非常容易。我建议您试一试。请查看W3Schools教程： 但基本上你需要指定一个宽度和高度。然后链接到背景，然后是图像坐标
img.sprite1{
width:46px;
height:44px;
background:url(img_sprites.png) 102 12;
}
是的，你正确地理解了我，这就是上面的代码试图使用twitter链接所做的，它工作得非常完美，但同样，只在一个屏幕上。如果是这样的话，除了多个http调用的节省外，我不确定我是否理解css精灵的价值。不，你不能，而且精灵的唯一价值就是避免多个http调用。你总是可以付钱给别人帮你做：）gplus.grBTW，在这个例子中，看起来他们使用的是一个单一的图像：为什么？首先，当涉及到网络标准时，w3schools是最糟糕的网站之一（多年来一直享有这样的声誉，犯了很多错误等等），正如我之前所说：精灵用于图标/按钮，而不是整个页面。我想我最好看看你的模型。