Радиальный градиент, занимающий все тело?

Как бы вы сделали радиальный градиент, занимающий все тело?Радиальный градиент, занимающий все тело?

На данный момент я могу сделать градиент просто прекрасным, но проблема в том, что градиент занимает примерно 100 пикселей на 100 пикселей. Фон тела установлен на 100%, но до сих пор не повезло.

Любые идеи? Ниже приведен CSS, который я использую в данный момент.

body { 
    background-color: #2b616d; 
    -moz-background-size: 100% 100%; 
    -webkit-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
    background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(99%, #568b93), color-stop(100%, rgba(0, 0, 0, 0))); 
    background-image: -moz-radial-gradient(center center, circle, #568b93 99%, rgba(0, 0, 0, 0) 100%); 
    background-image: radial-gradient(center center, circle, #568b93 99%, rgba(0, 0, 0, 0) 100%); 
}

Edit1: кажется Firefox работает просто отлично с приведенным выше кодом, а скорее это Webkit, который испытывает реальные проблемы. Любая помощь будет высоко оценена!

Edit2: По этой ссылке: http://webkit.org/blog/175/introducing-css-gradients/ Моего использование «точки» в WebKit ввернет .. В частности, радиус после каждой точки. Проблема в том, что это похоже на целочисленное значение, поскольку процентные показатели, похоже, не работают. Например, я пытаюсь сделать радиус 100%, но применимы только значения пикселей ... любые идеи?

источник

2010-10-10 Lee Olayvar

Это может быть просто ошибка в вебките. Когда я играю с свойством фона, уменьшая его ниже 100%, он не меняет размер градиента, но если вы увеличите его выше 100%, он увеличит градиент - НЕ ожидаемое поведение –

Да, сейчас я просто отпустил его. В конце концов, все браузеры должны использовать атрибут radial-gradient() по умолчанию, поэтому все они должны вести себя одинаково. :) –

** Дубликат: ** Посмотрите, не устраняет ли ваша проблема http://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats. Мне кажется, у вас такая же проблема. –

Для синтаксиса Mozilla-иш, попробуйте следующее:

[-moz-]radial-gradient(center center, circle cover, #568b93 99%, rgba(0, 0, 0, 0) 100%) 
              ^^^^^

Я не знаю, что Webkit эквивалент. Если «обложка» не работает, попробуйте «самый дальний угол».

источник

2010-10-10 19:21:38 zwol

На самом деле, я еще не тестировал его в Firefox. Похоже, FF и Webkit имеют серьезные конфликты. Этот код был создан от Sass/Compass. При дальнейших расследованиях Firefox работает так, как я и хотел. В настоящее время Webkit вызывает проблемы. Grr: / –

Радиальный градиент, занимающий все тело?

ответ

Смежные вопросы