Opera 11.11, несколько фонов, градиенты и проблема модернизма - PullRequest
Новая
       27

Opera 11.11, несколько фонов, градиенты и проблема модернизма

0 голосов
/ 04 августа 2011

У меня странная проблема с несколькими фонами.Я использую комбинацию линейного градиента, радиального градиента и повторяющегося изображения GIF, чтобы сделать фон для страницы.Вот код, который я назначаю основному контейнеру (сначала внутри тела): 

    background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,.8) 100%),                                                -moz-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),     url("../img/bodyBackground.gif");
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.8))),  -webkit-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),  url("../img/bodyBackground.gif");
    background-image: -o-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),                                                   -o-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),       url("../img/bodyBackground.gif");
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),                                                  -ms-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),      url("../img/bodyBackground.gif");
    background-image: linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),                                                      radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),          url("../img/bodyBackground.gif");
    background-repeat: no-repeat, no-repeat, repeat;

Я использовал css3generator , так что я почти уверен, что градиенты в порядке.Далее я использую Modernizr, чтобы сделать запасной вариант для браузеров ald.Этот стиль назначается контейнеру, если это nside .no-js, .no-multipbgs или .no-cssgradients html: 

background-image: url("../img/bodyBackground.gif")

Все браузеры работают нормально, IE9 откатывается правильно, ноопера ... Я тестирую в Опере 11.11, и он не отображает фон вообще.В то же время, Modernizr говорит, что он имеет несколько фонов и функцию градиентов CSS.Я просто не могу понять, что я делаю не так.

Посмотрите, пожалуйста, мой сайт и помогите!

1 Ответ

0 голосов
/ 09 августа 2011

Я думаю, что могу немного помочь (просто столкнулся с той же проблемой) ...:

Opera на данный момент поддерживает только линейные градиенты (см. здесь , примечание по радиальным градиентам; март 2011). Чтобы заставить линейную часть работать в вашем примере, вам нужно добавить точку для непрозрачности 0, например: 

-o-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),

в это: 

-o-linear-gradient(top, rgba(0,0,0,.0) 75%,rgba(0,0,0,.8) 100%),

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

Приветствия

РЕДАКТИРОВАТЬ: Попробуйте эту ссылку , показывающую, как сделать радиальные градиенты в Opera через SVG.

...