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

Question

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

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

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

html {

    background: url(images/bg.png);

}



body {

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

}

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

573 8

css background-image

8 ответов:

Comments

Ничего не найдено.

nickf · Accepted Answer · 2012-12-14 08:34:24

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;
}

TheLibzter · Accepted Answer · 2013-03-03 01:14:58

самый простой способ, который я нашел, чтобы использовать два разных фоновых изображения в одном 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.

code.rider · Accepted Answer · 2015-06-21 04:53:28

использовать
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;
}
простой способ настроить каждую позицию изображения с фоном-позиция: и установить свойство повтора с фоном-повтор: для каждого изображения индивидуально

Shannon · Accepted Answer · 2010-10-31 02:14:39

текущая версия 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/

Mike B · Accepted Answer · 2009-01-08 05:51:09

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

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

rachel · Accepted Answer · 2011-12-09 00:14:26

Если вы хотите несколько фоновых изображений, но не хотите, чтобы они перекрывались, вы можете использовать этот 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>

Rinku · Accepted Answer · 2016-04-06 21:05:05

#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>

мы можем легко добавить несколько изображений с помощью CSS3. мы можем прочитать подробно здесь http://www.w3schools.com/css/css3_backgrounds.asp

Sean James · Accepted Answer · 2009-01-08 05:44:13

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