背景图案上方的CSS渐变 [英] CSS gradient above background pattern

问题描述

我要制作图案背景，并在其上面设置白色到黑色(具有透明性)的渐变.如何解决问题，并使其跨浏览器工作?我从Mozilla开始，并且尝试使用下面的代码:

I want to make pattern background and a white to black (with transparency) gradient above it. How to work it out and also make it work cross-browser? I'm starting with Mozilla and I've tried to use code below:

background: url(../images/bg_pattern.gif), -moz-linear-gradient( rgba(255, 255, 255, 0.5) 5%, rgba(130, 130, 130, 0.5) 95%

这当然是行不通的.那么如何解决呢?该代码将如何查找其他浏览器? IE是否支持许多背景和透明度?我认为并非如此，因此我会在您回答之前询问您-如何在IE中解决该问题?

Of course this does not work. So how to work it out? How would the code look for other browsers? Does IE support many backgrounds and transparency? I think it doesn't so I'll ask before your answers - how to work it out for IE?

推荐答案

您将需要两个单独的元素，一个元素覆盖另一个元素.顶部的元素听起来应该像是您的渐变.仅供参考，这也是生成跨浏览器渐变的一个很好的工具，它是本周在An Event Apart上发布的:

You will need two separate elements, one overlaying the other. The element on top sounds like it should be your gradient. Also FYI here is a great tool for generating cross-browser gradients, just launched this week at An Event Apart:

http://www.colorzilla.com/gradient-editor/

这篇关于背景图案上方的CSS渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！