Tôi có thể có nhiều ảnh nền bằng CSS không?

316

Có thể có hai hình ảnh nền? Chẳng hạn, tôi muốn có một hình ảnh lặp lại trên đầu trang (lặp lại x) và một hình ảnh khác lặp lại trên toàn bộ trang (lặp lại), trong đó hình ảnh trên toàn bộ trang nằm phía sau hình ảnh lặp lại trên đầu trang.

Tôi thấy rằng tôi có thể đạt được hiệu ứng mong muốn cho hai ảnh nền bằng cách đặt nền của html và thân:

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

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

Đây có phải là CSS "tốt" không? Có một phương pháp tốt hơn? Và nếu tôi muốn ba hoặc nhiều hình nền?

css background-image

— Rudd Zwolinski
nguồn

377

CSS3 cho phép 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;
}

Các phiên bản hiện tại của tất cả các trình duyệt chính hiện nay đều hỗ trợ nó , tuy nhiên nếu bạn cần hỗ trợ IE8 trở xuống, thì cách tốt nhất bạn có thể làm việc xung quanh nó là có thêm div:

<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
nguồn

27

Nhiều 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. vi.wikipedia.org/wiki/ từ

— Vidime Vidas

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: css3.info/preview/multipl-backgrounds

— Krisc

2

Đối với IE8 - IE6, bạn có thể sử dụng PIE.js. webdesign.tutsplus.com/tutorials/htmlcss-tutorials/ Kẻ

— Aleš Kotnik

1

Liệu kích thước nền có tuân theo quy tắc này không? Tôi muốn tất cả các hình ảnh nền của tôi có chiều cao đầy đủ, ngoại trừ một trong số chúng (mà tôi muốn là chiều cao hình ảnh).

— mtmurdock

Có, kích thước nền tuân theo quy tắc tương tự (giống như tất cả các thuộc tính nền khác). Các thuộc tính nền (thường bắt đầu bằng nền tiền tố- và sau đó một thuộc tính cụ thể của nền) thực sự có thể được chỉ định trong chính thuộc tính nền, do đó, nhiều hình ảnh nền được hỗ trợ, nhiều thuộc tính được liệt kê cũng được hỗ trợ. Điều này áp dụng cho kích thước, vị trí, lặp lại, v.v.

— Cần sa

35

Cách dễ 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;
}

Rõ ràng, điều đó không nhất thiết chỉ dành cho phần thân của trang web, bạn có thể sử dụng nó cho bất kỳ div nào bạn muốn.

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

— TheLibzter
nguồn

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

— yoel halb

24

dùng cái 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 cho bạn mọi vị trí hình ảnh với vị trí nền: và đặt thuộc tính lặp lại với lặp lại nền: cho mỗi hình ảnh riêng lẻ

— mã.rider
nguồn

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 ảnh nền trong một khai báo CSS2. Xem tại đây http://dense13.com/blog/2008/08/31/multipl-background-images-with-css2/ và tại đây http://www.quirksmode.org/css/mult Môn_backgrounds.html và tại đây http: / /nicolasgallagher.com/multipl-backgrounds-and-bnings-with-css2/

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

— Shannon
nguồn

4

Có, điều đó là có thể, và đã được triển khai bởi trang web thử nghiệm 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 chồng lên nhau.

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

— Mike B
nguồn

4

Nếu bạn muốn nhiều ảnh nền nhưng không muốn chúng trùng 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>

— rachel
nguồ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>

Mở rộng đoạn trích

Chúng ta 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

— Rinku
nguồn

1

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

— Sean James
nguồn