Радиальные градиенты CSS3 с RGBA()

Я работаю над сайтом, который использует несколько градиентов css3 в качестве наложения для фона, облицованного текстурным изображением

URL-адрес сайта: --snipped -

В настоящее время для заголовка я использую следующий css:

#header {
 background: #DBD6D3;
 height: 364px;
 background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3);
 background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF));
}

#header .wrp{background:url('img/headerBg.png');height:100%;padding-top:40px;}

здесь headerBg.png - полупрозрачная текстура размером 5x5 пикселей, объявление для тела Мне нужно создать этот фон: alt text

Мне нужно знать, как сделать этот вид радиального фона в CSS3, изначально я использовал тот же код, что и заголовок, но с rgba() для цвета, установив конец градиента с непрозрачностью 0, но он создал слишком много шума.

попробовал несколько онлайн-генераторов, а также радиальный фон CSS3, но ни один из них не был хорош!

Этот образ, который я использую, занимает 280 килобайт, и я хочу уменьшить его, поскольку он значительно влияет на производительность! Помощь будет оценена.

обновление:

Загрузить psd, можно скачать с http://ylspeaks.com/stackoverflow_css3.zip

и добавление баунти

Ответы

Ответ 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!

http://duopixel.com/stackoverflow/gradient/ alt text

Ответ 2

background: #702914;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#A94122,#702914);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#702914),to(#A94122));