Czy Mogę mieć wiele obrazów tła za pomocą CSS?

Czy możliwe jest posiadanie dwóch obrazów tła? Na przykład chciałbym, aby jeden obraz powtarzał się na górze (repeat-x), a drugi na całej stronie( repeat), gdzie ten na całej stronie znajduje się za tym, który powtarza się na górze.

Odkryłem, że mogę osiągnąć pożądany efekt dla dwóch obrazów tła, ustawiając tło html i body: 

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

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

Czy to "dobry" CSS? Czy jest lepsza metoda? A co jeśli chciałbym trzy lub więcej obrazy tła?

Author: Brock Adams, 2009-01-08
Source

8 answers

CSS3 pozwala na takie rzeczy i wygląda tak: 

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

Obecne wersje wszystkich głównych przeglądarek obsługują GO, jednak jeśli potrzebujesz wsparcia IE8 lub poniżej, najlepszym sposobem na obejście tego jest posiadanie dodatkowych divów: {]} 

<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;
}
 372
Author: nickf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-14 06:34:24

Najprostszym sposobem, jaki znalazłem, aby użyć dwóch różnych obrazów tła w jednym div jest ta linia kodu: 

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

Oczywiście, że nie musi być tylko dla ciała strony internetowej, możesz użyć tego dla dowolnego div chcesz.

Mam nadzieję, że to pomoże! Jest post na moim blogu, który mówi o tym trochę bardziej szczegółowo, jeśli ktoś potrzebuje dalszych instrukcji lub pomocy - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div .
 32
Author: TheLibzter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-02 23:14:58

Użyj tego 

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

Prosty sposób na dostosowanie każdej pozycji obrazu za pomocą background-position: i ustawienie właściwości repeat za pomocą background-repeat: dla każdego obrazu indywidualnie

 22
Author: code.rider,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-21 01:53:28

Obecna wersja FF i IE oraz niektórych innych przeglądarek obsługuje wiele obrazów tła w jednej deklaracji CSS2. Look here http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2 / i tutaj http://www.quirksmode.org/css/multiple_backgrounds.html i tutaj http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Dla IE można rozważyć dodanie zachowania. Spójrz tutaj: http://css3pie.com/

 13
Author: Shannon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-30 23:14:39

Tak, jest to możliwe i zostało zaimplementowane przez popularny serwis testujący użyteczność Silverback . Jeśli spojrzysz na kod źródłowy, zobaczysz, że tło składa się z kilku obrazów, umieszczonych jeden na drugim.

Oto artykuł demonstrujący jak zrobić efekt można znaleźć na witamina . Podobną koncepcję owijania warstw "skórki cebuli" można znaleźć na liście Apart.

 4
Author: Mike B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-08 03:51:09

Jeśli chcesz mieć wiele obrazów tła, ale nie chcesz, aby na siebie nachodziły, możesz użyć tego 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;
}

Z tą strukturą HTML: 

<body 

<?php body_class(); ?>>

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

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>
 4
Author: rachel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-08 22:14:26 

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

Możemy łatwo dodać wiele obrazów za pomocą CSS3. możemy przeczytać szczegółowo tutaj http://www.w3schools.com/css/css3_backgrounds.asp

 2
Author: Rinku,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-06 18:05:05

Możesz mieć div dla góry z jednym tłem i innym Dla strony głównej i rozdzielić zawartość strony między nimi lub umieścić zawartość w pływającym div na innym poziomie Z. Sposób, w jaki to robisz, może działać, ale wątpię, aby działał w każdej przeglądarce, którą napotkasz.

 1
Author: Sean James,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-08 03:44:13