Question

我是CSS的新手 - 我只是一个iphone开发者，我想把一个主页放在一起推广我的应用程序，基本上只是一个背景图片，其中包含指向应用商店，脸谱和推特的链接。

我从我的设计师那里收到了主页图片（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将你的图像“组装”成一个文件的网站，而我的理解是这项技术的关键价值现在你不需要乱用多个图像，你可以要求设计师为你提供一个包含所有元素的图像......这不是真的吗？

感谢数百万人......

Answer 1

CSS Sprites被谨慎和有选择地使用，以提高性能。它们不是用来“跳过切片”的方式。您可以使用一些装饰性使用的按钮和图标制作精灵，但是，您仍然需要剪切它们并在新图像中重新定位它们。如果我理解正确的话，你认为你可以把你的html定位在一个巨大的背景上，即使你找到了一种方法（！）我担心如果你想要提升自己，它看起来并不好。（一次它没有灵活性和流动性 - 当然。）

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

Answer 2

查看W3Schools教程：

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

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

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

CSS Sprites和屏幕外的链接

2 个答案: