在网页中呈现带有alpha的图片

时间:2012-08-06 08:13:15

标签: css css3 textures

有没有办法在网页中使用alpha渲染背景纹理?我希望在渐变之上有纹理,所以我可以看透它。

我没有使用画布(虽然我确实使用画布来制作其他动画效果)

3 个答案:

答案 0 :(得分:2)

您可以使用CSS3 Multiple Backgrounds和CSS3 Gradients实现这一目标。这是关于这个主题的good article

编辑:为了澄清,您基本上只需要在对象上定义两个背景。第一个是渐变,而第二个是alpha纹理。

答案 1 :(得分:1)

你不需要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

答案 2 :(得分:0)

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