屏幕外的 CSS 精灵和链接答案

【问题标题】：CSS Sprites and links out of screen屏幕外的 CSS 精灵和链接
【发布时间】：2013-06-08 20:58:42
【问题描述】：

我完全是 CSS 新手 - 我只是一名 iphone 开发人员，我想将主页放在一起来推广我的应用程序，基本上只有一张背景图片，其中包含指向应用商店、facebook 和 twitter 的链接。

我从我的设计师那里收到了主页图片（jpeg，1400x776），并开始研究不同的方法来构建我的网站，而无需对这张图片进行切片，因为这是我最不想做的事情，这就是我遇到 CSS 的原因精灵（字面意思是昨天）。我想做的是“屏蔽”图像的某些区域并添加指向它们的链接，因此我使用以下代码“屏蔽”了一些图标，以便我可以将链接附加到它们并使它们“可点击”（事情如 facebook、twitter 链接等）。我的问题是，一旦我在较小的屏幕上查看了我的网站，虽然我确实看到了完整的图像，但“链接”却在屏幕之外（好像不再“附加”到 UI 元素上）。

我的 index.html：

<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>

解决这个问题的最佳方法是什么，这是否是使用 CSS sprint 的正确方法？我试图避免任何可能的方式进入 Photoshop 并切片我的图像。

PS：我很有可能完全错过了 CSS sprites 的工作原理，因为我经常遇到将您的图像“组装”到一个包含 CSS sprites 的文件的网站，而我的理解是这项技术的关键价值是不是现在你不需要处理多张图片，你可以要求设计师为你提供一张包含所有元素的图片……这不是真的吗？

谢谢百万...

【问题讨论】：

标签： html css web sprite

【解决方案1】：

为了提高性能，少用且有选择地使用 CSS Sprite。它们不被用作“跳过切片”的一种方式。您可以使用一些装饰性使用的按钮和图标制作精灵，但仍然需要剪切它们并将它们重新定位到新图像中。如果我理解正确，您认为您可以将您的 html 放置在一个巨大的背景上，即使您找到了一种方法（！）如果您想宣传自己，恐怕它看起来并不好。（这一次它既不灵活也不流畅——这是肯定的。）

如果您已经是开发人员，那么 CSS 会非常简单。我建议你试一试。

【讨论】：

是的，您正确理解了我的意思，这就是上面的代码试图对 twitter 链接做的事情，它可以完美运行，但同样只能在一个屏幕上运行。如果是这样的话，除了节省多个 http 调用之外，我不确定我是否了解 css sprites 的价值。
不，你不能，确实精灵的唯一价值是避免多次http调用。你总是可以花钱请人为你做这件事:) gplus.gr
顺便说一句，在这个例子中，他们似乎在使用一张图片：w3schools.com/css/tryit.asp?filename=trycss_sprites_nav 怎么来的？
首先，当谈到网络标准时，w3schools 是最糟糕的网站之一（多年来一直享有盛誉，很多错误等等。）在这个特定的例子中，正如我所说之前：精灵用于图标/按钮，而不是整个页面。我认为如果我看到你的模型会更好。

【解决方案2】：

查看 W3Schools 教程：

http://www.w3schools.com/css/css_image_sprites.asp

但基本上你指定一个宽度和高度。然后链接到背景，后跟图像坐标。

img.sprite1{
  width:46px;
  height:44px;
  background:url(img_sprites.png) 102 12;
}

【讨论】：