2013-04-05 2 views
0

Я использовал генератор this для создания градиентного фона, который мне нравится. С этим мне удалось создать следующий выглядящий CSS-код. Он исчезает между разными оттенками синего.Добавление содержимого на страницу беспорядочно с фоном

background-image: -ms-linear-gradient(top, #2BD0FF 0%, #09ADF1 100%); 
background-image: -moz-linear-gradient(top, #2BD0FF 0%, #09ADF1 100%); 
background-image: -o-linear-gradient(top, #2BD0FF 0%, #09ADF1 100%); 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2BD0FF), color-stop(1, #09ADF1)); 
background-image: -webkit-linear-gradient(top, #2BD0FF 0%, #09ADF1 100%); 
background-image: linear-gradient(to bottom, #2BD0FF 0%, #09ADF1 100%); 

Я вложил это в раздел тела моего кода CSS. Он выглядит гладко, но когда я добавляю контент, используя the code I posted in another topic, он делает фон полосатым.

Вот изображение, демонстрирующее эффект. Изображение на самом деле является снимком экрана, который возникает, когда я добавляю   в body. То, что происходит с облаками (для облаков, см. Ссылку выше), похоже, но полосы шире.

Мой HTML страница содержит некоторые другие элементы в body, но их удаление не влияет на ситуацию. Я включил jQuery 1.9.1 в раздел head и мой код, который точно такой же, как в предыдущем обсуждении.

В чем причина такого рода проблем?

ответ

0

background-repeat: no-repeat. Это должно решить проблему.

+0

Не повезло с этим. [Это то, что происходит.] (Http://imageshack.us/f/838/sieppaaa.png/). Синий является частью градиента, белый круг - частью облака, а оставшийся белый - частью фона. Использование 'no-repeat' заставило фон закончить там. – MikkoP

+0

Является ли элемент, которым вы применяете градиент, чтобы заполнить всю страницу? Если нет, сделайте так. –

0

Благодаря albertxing я нашел правильное ключевое слово и использовал Google для поиска решения. Кажется, эта тема уже рассмотрена в другом вопросе.

CSS Background Gradient Repeat Issue

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