CSS градиент над фоновым рисунком

Question

Я хочу сделать фоновый узор и градиент от белого к черному (с прозрачностью) над ним. Как это сделать, а также заставить работать кросс-браузер? Я начинаю с Mozilla, и я попытался использовать код ниже:

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?

Answer 1

Вам понадобятся два отдельных элемента, один накладывается на другой. Элемент сверху звучит так, как будто это ваш градиент. Также, к вашему сведению, это отличный инструмент для создания кросс-браузерных градиентов, который был запущен на этой неделе на An Event Apart:

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

Answer 2

Попробуйте это:

    background-image: url(images/pattern.png),  -webkit-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
    background-image: url(images/pattern.png),  -moz-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
    background-image: url(images/pattern.png),  -ms-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
    background-image: url(images/pattern.png),  -o-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
    background-image: url(images/pattern.png),  radial-gradient(circle at 0% 100%, rgb(20,150,254), rgb(119,117,174));

Answer 3

У меня есть рабочая версия для всего, кроме IE. : / Я не помню, где я его нашел, поэтому не могу дать должный кредит; однако вот оно:

background: -webkit-linear-Gradient (rgba (224,147,43, .9), rgba (224,147,43, .8)) исправлено, # 454040 url (images / grainy2.png) исправлено; background: -ms-linear-градиент (rgba (224,147,43, .9), rgba (224,147,43, .95)) исправлено, # 454040 url (images / grainy2.png) повторение исправлено; фон: -o-линейный градиент (rgba (224,147,43, .9), rgba (224,147,43, .95)) исправлено, # 454040 url (images / grainy2.png) повторение исправлено; background: -moz-linear-Gradient (rgba (224,147,43, .9), rgba (224,147,43, .95)) исправлено, # 454040 url (images / grainy2.png), повторение исправлено;

Первый цвет - это ваш верх, второй - ваш нижний, а третий - цвет поверх рисунка (не уверен, как вы уменьшите его до прозрачного). Наконец, просто перейдите к вашему шаблону.

Я не совсем уверен, для чего нужен ms. Как я уже сказал, я использую его в течение нескольких месяцев, но я не помню источник. Я просто использую их все, чтобы убедиться, что они работают. Все еще не исправлено в IE: /