缩略图网格墙作为墙纸？ [关闭]答案

【问题标题】：Thumbnails grid wall as wall paper? [closed]缩略图网格墙作为墙纸？ [关闭]
【发布时间】：2011-05-07 08:24:52
【问题描述】：

我想制作一堵缩略图墙以适应 2560x1440 像素的屏幕分辨率。我希望网格位于我的页面后面，作为网站的背景。

但是，当页面滚动时，网格保持静止。我已经制作了一些 CSS 和 HTML，并在 Firefox 4 和 Chrome 中对其进行了测试，这似乎工作正常。在 IE8 中它不起作用，页面div 不与网格墙重叠，而是位于网格墙下方。

在 IE 上测试 CSS / HTML 时使用正确的格式。而不是仅仅在页面上抛出 CSS 和 HTML。

【问题讨论】：

你为什么不制作一个大的平铺文件并将其用作背景？加载速度也会快得多。再三考虑.. 只是不要使用背景，您的网站会更漂亮。
这些图像将是一个由 php 生成的成员照片的活动墙。每个链接到自己的照片。顶部的页面已经使用 .png 40x40px 了。我需要将页面 div 重叠在网格 div 上。那是我的问题。

标签： css z-index fixed

【解决方案1】：

那是因为您没有 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 标记内。

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

【讨论】：

谢谢！ :-)。为这样一个简单的测试吸取了宝贵的教训。我想我被过多地使用 FF chrome 宠坏了，我最后在 IE 中进行了测试。也许我应该先在 IE 中测试。
@jonnypixel：在 IE 中测试，但不要先在 IE 中测试，因为它有一些其他浏览器没有的渲染错误。如果您为 IE 开发，您很可能会在您的布局中使用这些呈现错误，然后当您希望它在其他浏览器中工作时，您必须重新开始。
再次感谢您提供非常明智的反馈。很有道理。

【解决方案2】：

如果你不能合并你的背景图片，那么你需要使用 z-index。给#grid 一个比#wrap 低的z-index，你就会被排序（只要两个元素都被定位，它们现在就在这个位置）。

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

【讨论】：

谢谢山姆，这已经接近我需要的解决方案了。我将您的建议应用于 css，但出于某种愚蠢的原因 IE8 仍然不喜欢它。

【解决方案3】：

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

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

不再需要摆弄 z-index。

【讨论】：

body 标签 css 很好，但我的网格 div 正在用 php 生成缩略图，每个缩略图都是可点击的。我的页面 div 需要覆盖它。其效果是为了适应更大分辨率的屏幕，其中更多的成员照片将在页面周围作为网格墙可见。