html - 网站（背景）图像的光栅效果

Question

我想创建这样的东西作为网站的背景：

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

Answer 1

@朱利安

使用 CSSz-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;
}