CSS: установка градиента фона на ширину 100%, если страница не прокручивается - PullRequest
Новая
       5

CSS: установка градиента фона на ширину 100%, если страница не прокручивается

3 голосов
/ 28 февраля 2010

Вот два снимка экрана, на которых показан эффект с небольшим окном просмотра, которое необходимо прокрутить.

alt text alt text

HTML выглядит так: (игнорируя теги head и html) 

<body>
 <div id="grad1"></div>
 <div id="wrapper">
 <header>
  <h1 class="logo"><a href="/">Business Name</a></h1>
 </header> 
 <nav>
  <ul>
   <li><a class="first" id="index" href="/index.php">Home</a></li>
   <li><a  id="whatwedo" href="/whatwedo.php">What we do</a></li>
   <li><a  id="communicating" href="/communicating.php">Communicating</a></li>
   <li><a class="last" id="contact" href="/contact.php">Contact Us</a></li>
  </ul>
 </nav>
 <div style="clear:both;"></div>
 <section>
  <?= $content ?>
 </section>
 <footer>
  &copy; 2010
 </footer>
 </div> 
</body>

И (обрезанный) CSS, относящийся к body, grad1 и wrapper, выглядит следующим образом: 

body {
 color: #111;
 background-color: #3E9C9D;
}

#grad1 {
 height: 600px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
 width: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
    background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
}


#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

Как мне это исправить? Насколько мне известно, у меня должен быть градиент для другого элемента div, потому что мне нужно указать высоту.

(Я знаю, что CSS-градиент не работает в IE - там есть фоновое изображение для имитации поведения. У него та же проблема.)

Ответы [ 4 ]

3 голосов
/ 28 февраля 2010

ОК, для людей, которые находят это и не могут понять, CSS должен выглядеть следующим образом: 

body {
 color: #111;
 background-color: #3E9C9D;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
 background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
 background-repeat:repeat-x;
 background-size: 100% 600px;
 -o-background-size: 100% 600px;
 -moz-background-size: 100% 600px;
 -webkit-background-size: 100% 600px;
}

#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

Редактирование через 2 года - синтаксис градиента несколько изменился, и теперь все его поддерживают. Обязательно ознакомьтесь с изменениями перед использованием этого кода.

1 голос
/ 01 ноября 2011 
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}

.gradient {
background: linear-gradient(top, #243d6e 0%,#031b4d 61%,#011132 100%); /* W3C */
background-repeat: no-repeat;
background-attachment: fixed;
}

прикрепить .gradient к тегу body или к элементу контейнера.

1 голос
/ 28 февраля 2010

Это поведение предназначено для position: absolute, его координаты относительно области просмотра во время рендеринга.

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

0 голосов
/ 02 июня 2012

Не рекомендуется создавать веб-страницы для браузера.

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

  1. Создание узкого (даже одного пикселя) изображения с градиентом.
  2. В CSS установите повторение фонового изображения в направлении x, но не в направлении y
  3. Установите цвет фона тела таким же, как цвет в нижней части изображения.

Вот CSS: 

body {
 color: #111;
 background-color: #3E9C9D;
 background-image: URL(gradient_green.png);
 background-repeat:repeat-x;
}

#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...