css缩略图网格墙作为墙纸？

我真的想制作一个缩略图墙以适应2560x1440像素的屏幕分辨率css缩略图网格墙作为墙纸？

我希望网格坐在我的页面后面充当网站的背景。

但是当页面滚动时，网格保持不动。

我做了一些CSS和HTML和firefox4，铬，这似乎做工精细测试它，

但在IE8它不工作，页面DIV不重叠电网墙上，但在它位于。

请问任何人都可以透露一下如何以一种简单的方式实现跨浏览器兼容性。

由于提前，

约翰

############################### UPDATE

在IE上测试css/html时使用正确的格式。而不是只在页面上引用CSS和HTML。

谢谢Guffa的回答。

此外，萨姆鲍勒对Z指数的回答也很好。

我还没试过它在IE浏览器中，但它的作品，所以我不会花时间在它现在。

Thankyou Guffa和Sam

来源

2011-05-07 jonnypixel

为什么你不制作一个大的瓷砖文件，并将其用作背景？加载速度也会更快。第二个想法..只是不使用背景，你的网站会更美丽。 – ariel 2011-05-07 08:31:24

这些图像将成为php成员生成照片的活动墙。每个链接到自己的照片。通过topp的页面正在使用.png 40x40px。我需要将网页div覆盖在网格div上。这是我的问题。 – jonnypixel 2011-05-07 08:39:19

这是因为您没有HTML文档。您只需要在浏览器上放置一些HTML标签，并且浏览器会尽量使用它，并且确实令人惊讶。

由于您没有doctype标记，因此IE会以怪癖模式渲染页面，这基本上意味着它会尝试模拟尽可能最古老的方法。由于position:fixed是最近添加的，所以在此模式下不支持。

有效的HTML文档需要html，head，title和body标签，你需要一个doctype标签，以保持浏览器怪癖模式渲染页面。因此，呈现在标准兼容模式的最小的HTML文件看起来是这样的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
</head> 
<body> 
</body> 
</html>

你style标签那张head标签内，与内容而来的body标签内。

根据您要使用的HTML版本，您可以使用不同的doctype标签，请参阅W3C's Recommended list of Doctype declarations。

来源

2011-05-07 08:29:47 Guffa

谢谢！ :-)。为这样一个简单的测试学到了宝贵的经验。我想我太多地使用FF铬，我在IE测试最后。也许我应该先在IE中测试。 – jonnypixel 2011-05-07 08:50:51

@jonnypixel：在IE eary中测试，但不要先在IE中测试，因为它有一些其他浏览器没有的渲染错误。如果你为IE开发，你很可能会在你的布局中使用这些渲染错误，然后当你想让它在其他浏览器中工作时，你必须重新开始。 – Guffa 2011-05-07 08:55:24

再次感谢您的非常明智的反馈。这很有道理。 – jonnypixel 2011-05-07 09:00:46

如何将缩略图合并为一个png/jpg文件？然后，您可以：

body 
{ 
    background: url('thumbnails.jpg'); 
}

不需要再乱摆弄z-index。

来源

2011-05-07 08:31:44 rickchristie

身体标记CSS是好的，但我的网格div是用PHP生成缩略图，每个缩略图都是可点击的。我的页面div需要覆盖它。效果是适合更大分辨率的屏幕，其中更多成员的照片将作为网格墙在页面周围可见。 – jonnypixel 2011-05-07 08:38:46

如果你不能合并你的背景图片，那么你需要使用z-index。给#grid一个比#wrap更低的z-index，并且你将被排序（只要这两个元素被定位，他们在哪一分钟）。

#grid { position: fixed; z-index: -1; } 
#wrap { position: relative; z-index: 1; }

来源

2011-05-07 08:36:06

谢谢萨姆，这就是接近我需要的解决方案。我将你的建议应用于CSS，但由于某些愚蠢的原因，IE8仍然不喜欢它。 – jonnypixel 2011-05-07 08:42:10

css缩略图网格墙作为墙纸？

回答

相关问题