как мы можем использовать и контролировать градиент

Question

я использую это как фоновую панель ... повторяется, конечно,

http://www.freeimagehosting.net/uploads/3c2f75b680.gif

и я хочу заменить его на простой цвет CSS-градиента без изображения ... поэтому я искал по всему интернету и нашел:

 filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff' ,startColorstr='#000000'  , gradientType='0');

, но этого недостаточно .. тогда я искал в StackOverFlow.com и я нашел это , очень близко к моему вопросу ..

сначала я открыл это , но примеры не показали никакого градиента со мной (он выглядит просто как текст ... и градиента нет) ...

Затем я открыл это , и я пытался это:

linear-gradient(top, yellow, blue 20%, #0f0);

на div:

<div style="width: 633px; height: 268px; background:linear-gradient(top, yellow, blue 20%, #0f0);">
</div>

тоже не сработало ...

1. Я проверяю фотошоп и сею кое-что в градиенте, называемом "Непрозрачность средней точки" ... Доступно ли это в CSS .. Если это так, как его использовать?

2. в filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff' ,startColorstr='#000000' , gradientType='0'); как установить ограничение для startColorstr?

3. как использовать linear-gradient(top, yellow, blue 20%, #0f0); и radial-gradient(bottom left, farthest-side, red, yellow 50px, green); в CSS?

** примечание: ** один простой хороший ответ был бы в порядке, но я хотел бы знать все эти ... спасибо

Answer 1

Ну, во-первых, свойство filter доступно только в Internet Explorer. Это не будет работать в любом другом браузере.

Тогда не существует стандарта CSS, определяющего градиенты; есть рабочий черновик, который является частью CSS 3, но он еще далек от завершения, и поэтому функции linear-gradient и radial-gradient еще не широко доступны и в любом случае могут подвергнуться радикальным изменениям.

И WebKit делал все по-своему, кроме всех остальных.

Это текущее состояние, касающееся градиентов в CSS, и даже если поставщики браузеров реализуют рабочий проект CSS, имена свойств и функций будут иметь префикс -moz- или -webkit- и т. Д. Они не предназначены для свободного использования в Интернет, на самом деле. Это скорее технический обзор того, что может произойти, но все может очень хорошо измениться, и конечное свойство / функция в любом случае будет иметь другое имя (без префикса).

Если вам нужны параметризованные градиенты, то, вероятно, вам лучше всего написать скрипт, который создает их в соответствии с несколькими аргументами.

Answer 2

Сложность в том, что пока нет надежного кросс-браузерного способа создания градиентов без изображения.

• filter работает только в IE
• Есть -webkit-gradient, который работает только в некоторых браузерах
• Существует также новый тег <svg> , который, опять же, не имеет какой-либо согласованной реализации.

Если вы все еще действительно настроены на это, единственный другой вариант - сгенерировать их, используя javascript ( см. Этот сайт для примера).