Во всяком случае, кодировать фоновый код еще больше? - PullRequest
Новая
       1

Во всяком случае, кодировать фоновый код еще больше?

0 голосов
/ 15 февраля 2012

У меня есть градиентный фон веб-набора и повторяющееся изображение на той же строке кода в background-image. как

background-image:url(../images/bloobg.png), -moz-linear-gradient(bottom, #9bd5eb, #01aef0); /* FF3.6+ */

Интересно, смогу ли я добавить еще один код или что-нибудь, что заставит bloobg.png продолжать прокрутку влево. Я пытался использовать jQuery и Java, но я не думаю, что я готов: [

-edit- я поддерживал другие браузеры 

#body { background:#9bd5eb;
background-image: url(../images/bloobg.png); /* fallback */
background-image:url(../images/bloobg.png),-webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(../images/bloobg.png),-webkit-linear-gradient(bottom, #9bd5eb, #01aef0); /* Chrome 10+, Saf5.1+ */
background-image:url(../images/bloobg.png), -moz-linear-gradient(bottom, #9bd5eb, #01aef0); /* FF3.6+ */
background-image: url(../images/bloobg.png), -ms-linear-gradient(bottom, #9bd5eb, #01aef0); /* IE10 */
background-image: url(../images/bloobg.png),  -o-linear-gradient(bottom, #9bd5eb, #01aef0); /* Opera 11.10+ */
background-image:  url(../images/bloobg.png), linear-gradient(bottom, #9bd5eb, #01aef0); /* W3C */
background-attachment:fixed;
}

также веб-сайт www.bloomooyogurt.com

-edit- Я попробовал это, но не сработало. Можете ли вы увидеть, есть ли синтаксическая ошибка? По какой-то причине @-webkit-keyframes move { в сером ...

В файле CSS я поставил 

@-webkit-keyframes move {
    0%   { left: 0px; }
    50%  { left: 1000px; }
    100% { left: 0px; }
  }
@-moz-keyframes move {
    0%   { left: 0px; }
    50%  { left: 1000px; }
    100% { left: 0px; }
  }

тогда я положу 

#body { background:#9bd5eb; 
background-image: url(../images/bloobg.png); /* fallback */
background-image:url(../images/bloobg.png),-webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(../images/bloobg.png),-webkit-linear-gradient(bottom, #9bd5eb, #01aef0), -webkit-animation: move 10s infinite; /* Chrome 10+, Saf5.1+ */
background-image:url(../images/bloobg.png), -moz-linear-gradient(bottom, #9bd5eb, #01aef0), -moz-animation: move 10s infinite; /* FF3.6+ */
background-image: url(../images/bloobg.png), -ms-linear-gradient(bottom, #9bd5eb, #01aef0); /* IE10 */
background-image: url(../images/bloobg.png),  -o-linear-gradient(bottom, #9bd5eb, #01aef0); /* Opera 11.10+ */
background-image:  url(../images/bloobg.png), linear-gradient(bottom, #9bd5eb, #01aef0); /* W3C */
background-attachment:fixed;
}

Единственное, что изменилось, это градиент. Теперь это всего лишь один цвет.

Ответы [ 2 ]

2 голосов
/ 15 февраля 2012

Использование CSS-анимации для анимации свойства background-position.Вот пример (вам придется использовать префиксы браузера): 

@keyframes bgMove {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 100% 0, 0 0; }
}
.foo {
    animation: bgMove 5s infinite;
}
0 голосов
/ 15 февраля 2012

Ваш градиент в настоящее время работает только в одном браузере.

body { background: -moz-linear-gradient(top, #9bd5eb, #01aef0); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9bd5eb),color-stop(1, #01aef0)); background: linear-gradient(#9bd5eb, #01aef0); -pie-background: linear-gradient(#9bd5eb, #01aef0); }

...