ฉันสามารถมีภาพพื้นหลังหลายภาพโดยใช้ CSS ได้หรือไม่

316

เป็นไปได้หรือไม่ที่จะมีภาพพื้นหลังสองภาพ? ตัวอย่างเช่นฉันต้องการให้ทำซ้ำภาพหนึ่งภาพที่ด้านบน (ซ้ำ -x) และอีกหนึ่งภาพที่ทำซ้ำทั่วทั้งหน้า (ซ้ำ) โดยที่อีกภาพหนึ่งอยู่ด้านหลังของหน้าซึ่งอยู่ด้านบนสุด

ฉันพบว่าฉันสามารถบรรลุเอฟเฟ็กต์ที่ต้องการสำหรับภาพพื้นหลังสองภาพโดยการตั้งค่าพื้นหลังของ html และเนื้อหา:

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

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

CSS นี้ "ดี" หรือไม่ มีวิธีที่ดีกว่านี้ไหม? แล้วถ้าฉันต้องการภาพพื้นหลังสามภาพขึ้นไปล่ะ?

css background-image

— Rudd Zwolinski
แหล่งที่มา

377

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

— nickf
แหล่งที่มา

27

พื้นหลังหลายรูปแบบรองรับ Firefox, Chrome, Safari และ Opera เวอร์ชันล่าสุด มันจะได้รับการสนับสนุนใน IE9 เช่นกัน en.wikipedia.org/wiki/…

— Šime Vidas

4

และหากคุณต้องการมีการตั้งค่าการทำซ้ำ / ตำแหน่งที่แตกต่างกันคุณสามารถทำได้: css3.info/preview/multiple-backgrounds

— Krisc

2

สำหรับ IE8 - IE6 คุณสามารถใช้ PIE.js. webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…

— Aleš Kotnik

1

ขนาดพื้นหลังเป็นไปตามกฎเดียวกันนี้หรือไม่ ฉันต้องการให้ภาพพื้นหลังทั้งหมดของฉันมีความสูงเต็มยกเว้นหนึ่งในนั้น (ซึ่งฉันต้องการให้เป็นความสูงของภาพ)

— mtmurdock

ใช่ขนาดพื้นหลังเป็นไปตามกฎเดียวกัน (เช่นคุณสมบัติพื้นหลังอื่น ๆ ทั้งหมด) คุณสมบัติพื้นหลัง (มักเริ่มต้นด้วยคำนำหน้าพื้นหลัง - แล้วคุณสมบัติเฉพาะของพื้นหลัง) สามารถระบุได้จริงภายในคุณสมบัติพื้นหลังเองดังนั้นเนื่องจากสนับสนุนภาพพื้นหลังหลายภาพจึงสนับสนุนคุณสมบัติที่แสดงรายการหลายรายการ สิ่งนี้ใช้กับขนาดตำแหน่งการทำซ้ำ ฯลฯ

— Cannicide

35

วิธีที่ง่ายที่สุดที่ฉันพบว่าใช้ภาพพื้นหลังที่แตกต่างกันสองภาพในหนึ่ง div คือด้วยโค้ดบรรทัดนี้:

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

เห็นได้ชัดว่าไม่จำเป็นต้องมีเฉพาะเนื้อหาของเว็บไซต์เท่านั้นคุณสามารถใช้สิ่งนั้นกับฝ่ายใดก็ได้ที่คุณต้องการ

หวังว่าจะช่วย! มีโพสต์ในบล็อกของฉันที่พูดถึงเรื่องนี้อีกเล็กน้อยในเชิงลึกหากใครต้องการคำแนะนำเพิ่มเติมหรือความช่วยเหลือ - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- div

— TheLibzter
แหล่งที่มา

โปรดทราบว่าสิ่งนี้ใช้ได้กับพื้นหลังเท่านั้นและไม่สามารถใช้กับภาพพื้นหลังได้

— yoel halb

24

ใช้สิ่งนี้

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

วิธีง่ายๆในการปรับตำแหน่งภาพทุกตำแหน่งด้วยตำแหน่งพื้นหลัง: และตั้งค่าคุณสมบัติการทำซ้ำด้วยการทำพื้นหลังซ้ำ: สำหรับทุกภาพแยกกัน

— code.rider
แหล่งที่มา

13

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/

— แชนนอน
แหล่งที่มา

4

ใช่มันเป็นไปได้และได้รับการดำเนินการโดยได้รับความนิยมเว็บไซต์ทดสอบการใช้งานSilverback หากคุณดูซอร์สโค้ดคุณจะเห็นว่าพื้นหลังประกอบด้วยหลายภาพวางไว้ด้านบนของกันและกัน

นี่คือบทความแสดงให้เห็นถึงวิธีการทำผลกระทบที่สามารถพบได้ในวิตามิน แนวคิดที่คล้ายกันสำหรับห่อเหล่านี้หอมผิวชั้นที่สามารถพบได้ในรายการนอกเหนือ

— ไมค์บี
แหล่งที่มา

4

หากคุณต้องการภาพพื้นหลังหลายภาพ แต่ไม่ต้องการให้ซ้อนทับกันคุณสามารถใช้ 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>

— ราเชล
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

เราสามารถเพิ่มหลายภาพได้อย่างง่ายดายโดยใช้ CSS3 เราสามารถอ่านรายละเอียดได้ที่นี่http://www.w3schools.com/css/css3_backgrounds.asp

— Rinku
แหล่งที่มา

1

คุณสามารถมี div สำหรับด้านบนที่มีพื้นหลังหนึ่งและอีกอันสำหรับหน้าหลักและแยกเนื้อหาของหน้าระหว่างพวกเขาหรือวางเนื้อหาใน div ที่ลอยอยู่ในระดับ z อีกระดับ วิธีที่คุณใช้อาจทำงานได้ แต่ฉันสงสัยว่ามันจะทำงานบนทุกเบราว์เซอร์ที่คุณพบ

— ฌอนเจมส์
แหล่งที่มา