使用精灵的身体背景

我改变我的网站使用一个精灵图像，而不是许多单独的图像。使用精灵的身体背景

因此我的精灵（1000 x 2000像素）上的第一件事是背景图像，它是100 x 2000像素。

什么css看起来像只为第一个100px重复x？

谢谢

2013-03-14 IIS7 Rewrite

这是怎么回事与downvote？ – 2013-03-14 03:24:31

@shnisaka - 没有太多细节？嗯，让我们看到： 1. html正文标签 2.使用CSS设置体背景 3.使用子画面图像设置体背景 4.背景图像100×2000个像素 5.背景图像将被重复水平。 6. css不应该在精灵上显示其他图像对不起，你想要什么更多的细节？ – 2013-03-14 03:41:54

'什么css看起来像做一个repeat-x只为第一个100px？'你已经回答了你的问题自己的问题。做repeat-x并指定在你的情况下的宽度和高度100×2000像素..你还需要什么？ – shnisaka 2013-03-14 03:53:28

其实最好的解决方案是制作3个精灵。

主sprite.png（1000x2000所有图标和图像）

的x sprite.png（1像素宽）将其用于全部重复-X背景

的y sprite.png（1px的高度）所有使用它的重复-Y背景

来源

2013-03-14 03:20:36

我的背景使用了一个重复的100px模式，所以在这种情况下，我需要它是100px。你是说x-sprite.png是我的背景图像在这种情况下（即不是真正的图像精灵）？ – 2013-03-14 03:26:32

是的，但是你可以添加其他repeat-x背景到x-repeat.png。（如果有的话）在这种情况下将宽度更改为100px无关紧要 – 2013-03-14 04:12:28

从amazon.com查看此精灵如果您想要appl y重复x到任何图像，该图像应该填充精灵图像的整个宽度。 http://g-ecx.images-amazon.com/images/G/01/common/sprites/sprite-site-wide-2._V146303866_.png – 2013-03-14 04:19:12

三种解决方案：

1 - 改变你对精灵形象contsturction，而不是使用100xwhatever你想要的精灵形象1000x2000的使用和堆叠在底部的其他图标和图像

<html> 
<head> 
<style> 
body {background:url('yourspriteimage.png'); background-repeat:repeat-x; width:100px;height:2000px;background-position:0px 0px;} 
</style> 
</head> 
<body> 
your content here 
</body> 
</html>

2-不要渲染你的背景图像。

3-创建三个子画面图像（一个仅用于X-重复，一个只有Y型重复，对不重复）

来源

2013-03-14 03:59:47 shnisaka

不，它不起作用，因为你将body标签的宽度设置为100px（你的css有倒退，但是关心细节），这意味着所有页面内容必须在100px内，它不会“T。因此，在你的第二个评论取笑这个问题后，我的回复是“将身体的宽度设置为100px”。 – 2013-03-14 04:39:19

@ IIS7Rewrite重写修复了它 – shnisaka 2013-03-14 04:51:47

使用精灵的身体背景

回答

相关问题