2009-01-08 46 views
299

Có thể có hai hình nền không? Ví dụ, tôi muốn có một hình ảnh lặp lại trên đầu (lặp lại-x), và lặp lại một lần nữa trên toàn bộ trang (lặp lại), nơi một hình ảnh trên toàn bộ trang nằm sau một hình lặp lại trên đầu trang.Tôi có thể có nhiều hình nền bằng CSS không?

Tôi đã thấy rằng tôi có thể đạt được hiệu quả mong muốn cho hai hình ảnh nền bằng cách thiết lập nền tảng của html và cơ thể:

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

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

Đây có phải là "tốt" CSS? Có phương pháp nào tốt hơn không? Và nếu tôi muốn có ba hình nền trở lên thì sao?

Trả lời

368

CSS3 cho phép các loại điều này và nó trông như thế này:

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

The current versions of all the major browsers now support it, tuy nhiên nếu bạn cần hỗ trợ IE8 hoặc thấp hơn, thì cách tốt nhất bạn có thể làm việc xung quanh nó là phải có divs thêm:

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

Nhiều hình nền được hỗ trợ bởi các phiên bản mới nhất của Firefox, Chrome, Safari và Opera. Nó cũng sẽ được hỗ trợ trong IE9. http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets) –

+4

Và nếu bạn muốn có các cài đặt lặp lại/vị trí khác nhau, bạn có thể thực hiện việc này: http://www.css3.info/preview/multiple-backgrounds/ – Krisc

+2

Đối với IE8 - IE6, bạn có thể sử dụng PIE.js. http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/curing-css3-headaches-in-older-browsers/ –

1

Bạn có thể có một div ở trên cùng với một nền và một nền khác cho trang chính và tách nội dung trang giữa chúng hoặc đặt nội dung trong div động trên cấp độ z khác. Cách bạn đang làm nó có thể làm việc nhưng tôi nghi ngờ nó sẽ làm việc trên mọi trình duyệt bạn gặp phải.

4

Vâng, đó là có thể, và đã được thực hiện bằng cách kiểm tra trang web khả năng sử dụng phổ biến Silverback. Nếu bạn xem qua mã nguồn, bạn có thể thấy rằng nền được tạo thành từ một số hình ảnh, được đặt trên đầu trang của nhau.

Đây là bài viết minh họa cách thực hiện hiệu ứng trên Vitamin. Một khái niệm tương tự để gói các lớp 'da hành tây' này có thể được tìm thấy trên A List Apart.

13

Phiên bản hiện tại của FF và IE và một số trình duyệt khác hỗ trợ nhiều hình nền trong một khai báo CSS2 duy nhất. Hãy xem tại đây http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ và tại đây http://www.quirksmode.org/css/multiple_backgrounds.html và tại đây http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Đối với IE, bạn có thể xem xét thêm hành vi. Nhìn đây: http://css3pie.com/

3

Trên thực tế có một article, mà cho bạn biết làm thế nào để làm điều đó với một Lọc IE trong CSS tập tin.

Tôi hy vọng nó hữu ích.

4

Nếu bạn muốn nhiều hình ảnh nền nhưng không muốn họ chồng chéo lên nhau, bạn có thể sử dụng CSS này:

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

với cấu trúc HTML này:

<body 

<?php body_class(); ?>> 

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

    <div id="pageborders"> 

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

Cách đơn giản nhất tôi đã tìm thấy để sử dụng hai hình nền khác nhau trong một div là với dòng mã này:

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

Obviou sly, đó không phải là chỉ cho cơ thể của trang web, bạn có thể sử dụng cho bất kỳ div bạn muốn.

Hy vọng điều đó sẽ hữu ích! Có một bài đăng trên blog của tôi nói về điều này sâu hơn một chút nếu bất kỳ ai cần thêm hướng dẫn hoặc trợ giúp - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div.

+0

Lưu ý rằng tính năng này chỉ hoạt động với nền chứ không phải với hình nền –

22

sử dụng này

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

một cách đơn giản để điều chỉnh bạn mỗi vị trí hình ảnh với background-position: và thiết lập thuộc tính lặp lại với background-repeat: cho mỗi hình ảnh cá nhân

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>

Chúng tôi có thể dễ dàng thêm nhiều hình ảnh bằng CSS3. chúng ta có thể đọc chi tiết tại đây http://www.w3schools.com/css/css3_backgrounds.asp

Các vấn đề liên quan