在网页中使用alpha渲染图片

Question

有没有办法在网页中用alpha来渲染背景纹理？我想要在渐变的顶部有纹理，这样我就可以透过它看到它。

我没有使用canvas (尽管我确实使用canvas实现了一些其他动画效果)

Answer 1

你可以使用CSS3多重背景和CSS3渐变来实现这一点。这是一个关于这个主题的good article。

编辑：为了清楚起见，您基本上只需要在对象上定义两个背景。第一个是渐变，第二个是alpha纹理。

Answer 2

你不需要CSS3来做这件事。在html上使用无缝背景磁贴，在body上使用alpha渐变。

html {background: #fff url(path/to/bg-tile.png) repeat 0 0;}
body {background: transparent url(path/to/gradient.png) repeat-x 0 0;}

Multiple background images are not supported in IE<9

Answer 3

你可以使用一个大的div作为背景，并在div中添加渐变和png，然后使用css来调整大小和位置