栅格对网站（背景）图像的影响

Question

我想创建像这样的网站背景：

实现这种类似栅格效果的最佳方法是什么？

Answer 1

@Julian

使用CSS z-index属性将html元素与CSS3渐变背景和图层进行图层和样式化，并使用栅格背景为body元素设置样式。

注意： 您可以使用CSS渐变背景或实际图像作为背景。请记住实施回退以支持不支持CSS3渐变背景和数据URI的旧版浏览器。

查看代码和演示： http://jsfiddle.net/QMtK9/

<style>
*{margin:0;padding:0;border:0}
html{
background:#eee;/*Old browsers*/
background:#eee -moz-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);/*FF3.6+*/
background:#eee -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,.2)),color-stop(100%,rgba(0,0,0,.2)));/*Chrome,Safari4+*/
background:#eee -webkit-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);/*Chrome10+,Safari5.1+*/
background:#eee -o-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);/*Opera11.10+*/
background:#eee -ms-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);/*IE10+*/
background:#eee linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);/*W3C*/
z-index:1 !important
}
html,body{height:100%;min-height:100%;background-attachment:fixed}
html body{position:relative !important}
body{
background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC) repeat center center !important;
z-index:2 !important
}
</style>

其他资源：

• https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index
• https://www.google.com/#q=css+z-index

Answer 2

2秒的谷歌搜索给了我的这个网站：http://www.patternify.com/

Answer 3

这就是我自己做的事情：

1. 我在photoshop中创建一个正方形（可以是3x3或5x5或其他）
2. 将一部分设为黑色，另一部分为透明或半透明
3. 将它们保存为png

然后我将需要第二个用于颜色的图像

1. 在photoshop中创建一些颜色
2. 使图像半透明
3. 将其另存为.png

然后在CSS3中我会这样放置：

body {
   background-image: url("images/raster.png");
   background-repeat: repeat;
}
#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("images/colorimage.png") top center no-repeat;
}