Как я должен отображать этот фон с помощью CSS? - PullRequest
Новая
       10

Как я должен отображать этот фон с помощью CSS?

1 голос
/ 12 ноября 2009

При создании фона в CSS я обычно просто использую градиентный фон, который начинается сверху, а затем заканчивается сплошным цветом.Поэтому я нарезаю тонкий слой градиента, repeat-x, а затем устанавливаю фон для определенного цвета 

(background:#color url(image location.png) repeat-x)

Однако я сталкиваюсь с уникальным препятствием, которое мне нужно направлять.У меня есть следующее:

  1. Фон является градиентом
  2. Однако есть также фоновое изображение, которое повторяется
  3. Указанное фоновое изображение повторяется до концаpage
  4. См. снимок экрана со стороны макета (http://www.petpinpoint.com/sidebar.png)

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

Ответы [ 5 ]

3 голосов
/ 12 ноября 2009

Вам нужно два фона с, но градиент должен быть полупрозрачным PNG 

html {
    background: #E6E6E6 url(/content/images/figure.png) repeat scroll 0 0;
    height:100%;
    width:100%;
}
body {
    background: transparent url(/content/images/gradient.png) repeat-x right top;
    height:100%;
    width:100%;
}

Редактировать: для всегда присутствующего IE6, 

<!--[if lt IE 7]>
body {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/images/gradient.png',sizingMethod='scale');
}
<![endif]-->
1 голос
/ 12 ноября 2009

Если вам нужны два фона, то вам нужны два блочных элемента контента полной ширины и высоты. На первом (<body>) вы устанавливаете изображение градиента в качестве фона. На втором (первый <div> элемент <body>) вы устанавливаете повторное изображение в качестве фона. Единственное, что вам нужно убедиться, это то, что повторяющееся изображение само по себе имеет прозрачный фон (вы можете сделать это с помощью GIF и PNG).

0 голосов
/ 12 ноября 2009

Вы можете установить background-color страницы / тела на нижний цвет градиента. Сделайте градиент настолько высоким, насколько вам нужно, и только повторяйте x, а не y. Затем, когда страница становится выше градиентного фона, она просто исчезает до цвета фона, который продолжается бесконечно.

0 голосов
/ 12 ноября 2009

Так у вас есть 2 разных фона? Вы можете объединить их вместе, используя фотошоп или фейерверк. Затем используйте один фон в CSS, повторяя, как вам нужно.

0 голосов
/ 12 ноября 2009

Что, если вы применили градиентный фон к элементу html, а повторяющееся изображение к элементу body? Имеет ли повторяющееся изображение прозрачный фон, чтобы градиент просвечивал?

Я не проверял эту идею, и у нее могут быть проблемы со старыми версиями IE (которые не очень хорошо справляются с прозрачностью), но, возможно, стоит изучить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...