CSS kullanarak birden çok arka plan görüntüsü alabilir miyim?

316

İki arka plan resmi olması mümkün müdür? Örneğin, bir görüntünün üst kısımda tekrarlanmasını (repeat-x) ve tüm sayfa boyunca başka bir tekrarın (tekrar) olmasını istiyorum.

Ben html ve vücut arka planını ayarlayarak iki arka plan resimleri için istenen efekti elde edebilirsiniz buldum:

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

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

Bu "iyi" bir CSS mi? Daha iyi bir yöntem var mı? Ve üç veya daha fazla arka plan görüntüsü istersem ne olur?

css background-image

— Rudd Zwolinski
kaynak

377

CSS3 bu tür şeylere izin verir ve şöyle görünür:

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

Tüm büyük tarayıcıların mevcut sürümleri artık onu desteklemektedir , ancak IE8 veya daha düşük bir sürümü desteklemeniz gerekiyorsa , etrafta çalışmanın en iyi yolu ekstra div'lara sahip olmaktır:

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

— nickf
kaynak

27

Firefox, Chrome, Safari ve Opera'nın en son sürümleri tarafından birden çok arka plan desteklenmektedir. IE9'da da desteklenecektir. tr.wikipedia.org/wiki/…

— Šime Vidas

4

Farklı tekrar / konum ayarlarına sahip olmak isterseniz bunu yapabilirsiniz: css3.info/preview/multiple-backgrounds

— Krisc

2

IE8 - IE6 için PIE.js kullanabilirsiniz. webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…

— Aleš Kotnik

1

Arka plan boyutu aynı kuralı izliyor mu? Biri hariç tüm arka plan resimlerimin tam yükseklikte olmasını istiyorum (ki bu görüntü yüksekliği olmak istiyorum).

— mtmurdock

Evet, arka plan boyutu aynı kuralı izler (diğer tüm arka plan özellikleri gibi). Arka plan özellikleri (genellikle arka plan önekiyle başlayan ve daha sonra arka planın belirli bir özelliği ile) aslında background özelliğinin içinde belirtilebilir, bu nedenle birden çok arka plan görüntüsü desteklendiğinden, listelenen birden çok özellik de desteklenir. Bu boyut, pozisyon, tekrar vb. İçin geçerlidir.

— Cannicide

35

Bir div iki farklı arka plan resimleri kullanmak için bulduk en kolay yolu bu kod satırı ile:

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

Açıkçası, bu sadece web sitesinin gövdesi için olmak zorunda değil, bunu istediğiniz herhangi bir div için kullanabilirsiniz.

Umarım yardımcı olur! Blogumda, kimsenin daha fazla talimat veya yardıma ihtiyacı varsa bunun hakkında daha derinlemesine konuşan bir yazı var - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- div .

— TheLibzter
kaynak

Bunun yalnızca arka planla çalıştığını ve arka plan resmiyle çalışmadığını unutmayın

— yoel halb

24

bunu kullan

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

arka plan konumu ile her görüntü konumunu ayarlamanın basit bir yolu: ve arka plan tekrarı ile tekrar özelliğini ayarlamak: her görüntü için ayrı ayrı

— code.rider
kaynak

13

FF ve IE'nin mevcut sürümü ve diğer bazı tarayıcılar, tek bir CSS2 bildiriminde birden çok arka plan resmini destekler. Buraya http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ ve buraya http://www.quirksmode.org/css/multiple_backgrounds.html ve buraya bakın http: / /nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

IE için bir davranış eklemeyi düşünebilirsiniz. Buraya bakın: http://css3pie.com/

— Shannon
kaynak

4

Evet, mümkündür ve popüler kullanılabilirlik testi sitesi Silverback tarafından uygulanmıştır . Kaynak koduna bakarsanız, arka planın üst üste yerleştirilmiş birkaç görüntüden oluştuğunu görebilirsiniz.

Etkinin nasıl yapılacağını gösteren makale Vitamin üzerinde bulunabilir . Bu 'soğan derisi' katmanlarını sarmak için benzer bir konsept A List Apart'ta bulunabilir .

— Mike B
kaynak

4

Birden çok arka plan resmi istiyorsanız, ancak üst üste gelmelerini istemiyorsanız bu CSS'yi kullanabilirsiniz:

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

bu HTML yapısıyla:

<body 

<?php body_class(); ?>>

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

  <div id="pageborders">

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

— rachel
kaynak

2

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

Snippet'i genişlet

CSS3'ü kullanarak kolayca birden fazla resim ekleyebiliriz. burada ayrıntılı olarak okuyabiliriz http://www.w3schools.com/css/css3_backgrounds.asp

— Rinku
kaynak

1

Ana sayfa için bir arka plan ve diğeri ile üst için bir div olabilir ve sayfa içeriğini aralarında ayırabilir veya içeriği başka bir z düzeyinde kayan bir div'e koyabilirsiniz. Yaptığınız yol işe yarayabilir, ancak karşılaştığınız her tarayıcıda çalışacağından şüpheliyim.

— Sean James
kaynak