Ответ 1
Редактировать Jan 2011: Webkit в ночное время теперь поддерживает эллиптические градиенты http://webkit.org/blog/1424/css3-gradients/, они в конечном итоге найдут свой путь в Safari и Chrome. Подделка эллиптических радиальных градиентов через css-преобразования в конечном итоге будет ненужной.
У вашей проблемы самые трудные ограничения, с которыми я когда-либо сталкивался, но это интересная задача, и она иллюстрирует ограничения каждого подхода к браузерам для радиального фона, поэтому я решил попробовать.
Во-первых, подход rgba мертворожден, потому что непрозрачность будет скрывать некоторые из шумов. Лучше применять полупрозрачный шум поверх градиента, вы можете избежать дополнительного div, применяя несколько фона на одном и том же изображении:
background: url(noise.png) repeat top left, -webkit-gradient(radial,50% 0,700,50% 0,100,from(#6f2813),to(#B9513D)) transparent;
Вы можете заметить свойство цвета в конце объявления, оно выглядит странно, но это то, как вы объявляете цвета при применении нескольких фонов.
Во-вторых, webkit не поддерживает эллиптические фоны, поэтому работа вокруг этого сжимает градиент через -webkit-transform и немного позиционирует его:
-webkit-transform: scale(1, 0.7) translate(0, -350px);
Для здравомыслия правильная вещь, казалось бы, применяет круговые фоны как для FF, так и для webkit, а затем преобразует их. Однако преобразование Firefox не поддерживает масштабирование градиентов! Поэтому мы применяем эллиптический фон:
background: url(noise.png) repeat top left, -moz-radial-gradient(50% 0 0deg,ellipse farthest-side,#B9513D,#6f2813) transparent;
Но, поскольку контейнер Webkit сжимается, градиент Firefox больше! На этом этапе мы подумаем о применении разных правил CSS для высоты градиента, но поскольку Firefox не масштабирует градиент, мы можем применить одно и то же преобразование на эллипсовом фоне, чтобы контейнеры имели одинаковую высоту:
-moz-transform: scale(1, 0.7) translate(0, -250px);
И вуаля! у нас есть эллиптический градиент с шумом, который работает как на Safari, так и на Firefox!