在网页上用alpha渲染图片

有没有办法在网页上用alpha渲染背景纹理？我想在渐变的顶部有纹理，这样我就能看穿它。在网页上用alpha渲染图片

我没有使用帆布为这个（虽然我也用帆布一些其他的动画效果）

2012-08-06 ryf9059

可以实现与CSS3多背景和CSS3渐变。这是关于这个问题的good article。

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

2012-08-06 08:15:53

这是IE9不支持之前。 – 2012-08-06 09:20:35

@JezenThomas是的，它不是。但是，现在对于不支持现代功能的浏览器使用后退通常是一个好主意，而不是降低大多数实际看到它们的体验。 – 2012-08-06 10:09:01

同意，但这个问题很容易解决没有CSS3。 – 2012-08-06 12:43:31

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

2012-08-06 08:56:39

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

2012-08-06 09:16:43

什么是透明的关键词？似乎不适合我，我应该为它声明一个alpha吗？ – ryf9059 2012-08-13 17:29:36

这就是部分[CSS background fasthand declaration]（http://www.w3schools.com/css/css_background.asp）。它设置背景颜色。你是什么意思“声明一个alpha”？ – 2012-08-13 17:51:24

通过声明一个alpha我意思是为它分配一个值，因为我的纹理不透明，应该有一个默认的阿尔法1，但这里的透明不提供一个让我困惑的alpha。 – ryf9059 2012-08-13 18:46:53

回答