Можно ли использовать несколько фоновых изображений с помощью CSS?

Возможно ли иметь два фоновых изображения? Например, я хотел бы, чтобы одно изображение повторялось в верхней части (repeat-x), а другое повторялось на всей странице (повтор), где одна по всей странице находится за той, которая повторяется поверх.

Я обнаружил, что могу добиться желаемого эффекта для двух фоновых изображений, установив фон html и body:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

Является ли этот "хороший" CSS? Есть ли лучший метод? А что, если мне нужны три или более фоновых изображения?

Ответ 1

CSS3 допускает такую вещь, и она выглядит так:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

Текущие версии всех основных браузеров теперь поддерживают его, однако, если вам нужно поддерживать IE8 или ниже, то лучший способ вы можете работа вокруг него состоит в том, чтобы иметь дополнительные divs:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

Ответ 2

Самый простой способ, которым я нашел использование двух разных фоновых изображений в одном div, - это эта строка кода:

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

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

Надеюсь, что это поможет! В моем блоге есть сообщение, в котором говорится об этом немного подробнее, если кому-то нужны дополнительные инструкции или помощь - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div.

Ответ 3

используйте этот

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

простой способ настроить каждую позицию изображения с фоновой позицией: и установить свойство повтора с помощью background-repeat: для каждого изображения индивидуально

Ответ 4

Текущая версия FF и IE и некоторых других браузеров поддерживает несколько фоновых изображений в одной декларации CSS2. Посмотрите здесь http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ и здесь http://www.quirksmode.org/css/multiple_backgrounds.html и здесь http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Для IE вы можете подумать о добавлении поведения. Смотрите здесь: http://css3pie.com/

Ответ 5

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

Вот статья, демонстрирующая, как сделать эффект, можно найти на Vitamin. Аналогичную концепцию обертывания этих слоев "луковой кожи" можно найти на A List Apart.

Ответ 6

Если вы хотите несколько фоновых изображений, но не хотите, чтобы они перекрывались, вы можете использовать этот CSS:

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

с этой структурой HTML:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>

Ответ 7

На самом деле есть статья в которой рассказывается, как это сделать с помощью фильтра IE в CSS файл.

Надеюсь, это полезно.

Ответ 8

#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Ответ 9

У вас может быть div для верхней части с одним фоном, а другой для главной страницы и разделение содержимого страницы между ними или размещение содержимого в плавающем div на другом уровне z. То, как вы это делаете, может работать, но я сомневаюсь, что он будет работать во всех браузерах, с которыми вы сталкиваетесь.