CSS background image cơ thể cố định để toàn màn hình ngay cả khi phóng to in/out

Question

tôi đang cố gắng để đạt được một cái gì đó như thế này với CSS:

Tôi muốn giữ hình ảnh body background cố định trên toàn màn hình, đây là loại thực hiện bởi các đoạn mã sau:

body 
{ 
    background: url(../img/beach.jpg) no-repeat fixed 100% 100%; 
} 

Bây giờ tôi có thể xác minh cửa sổ thực sự là lấp đầy bởi hình ảnh đó, ít nhất là các công trình này trên Firefox của tôi 3,6

Tuy nhiên, nó hơi say lên khi tôi đã cố gắng để phóng to/out (ctrl + -/+), hình ảnh chỉ được kéo dài/thu nhỏ khi thu phóng trang.

Có cách nào tốt hơn để làm điều này hoàn toàn với CSS không? Tôi đã không tìm thấy một tài sản tốt cho background-image.

Hoặc tôi có nên bắt đầu suy nghĩ về jQuery để thao tác chiều rộng và chiều cao khi đang di chuyển không? Cả hai đều đặt tới 100% vì vậy tôi nghĩ rằng nên làm việc "như mọi khi" :(

Thanks cho bất kỳ gợi ý trước!

Answer 1

Tôi đã sử dụng these techniques trước và cả hai đều hoạt động tốt. Nếu bạn đọc ưu/nhược điểm của mỗi bạn có thể quyết định là phù hợp với trang web của bạn.

Hoặc bạn có thể sử dụng full size background image jQuery plugin nếu bạn muốn thoát khỏi các lỗi ở trên.

Answer 2

đây là mã đơn giản cho trang đầy đủ hình nền khi phóng to bạn chỉ cần áp dụng width:100% trong phong cách/css thats nó

position:absolute; width:100%;

Answer 3

có kỹ thuật khác

sử dụng

background-size:cover 

Đó là nó bộ đầy đủ các css là

body { 
    background: url('images/body-bg.jpg') no-repeat center center fixed; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

các trình duyệt mới nhất hỗ trợ thuộc tính mặc định.

Answer 4

Bạn có thể làm khá nhiều với đồng bằng css ... thuộc tính css background-size có thể được đặt thành một số thứ cũng như chỉ cover như Ranjith đã chỉ ra.

Cài đặt background-size: cover chia tỷ lệ hình ảnh thành toàn bộ màn hình nhưng có thể có nghĩa là một số hình ảnh bị tắt nếu tỷ lệ màn hình và hình ảnh khác nhau.

Một giải pháp thay thế tốt là background-size: contain thay đổi kích thước hình nền để vừa với chiều rộng và chiều cao nhỏ hơn, đảm bảo toàn bộ hình ảnh hiển thị nhưng có thể dẫn đến hộp thư nếu tỷ lệ khung hình khác nhau.

Ví dụ:

body { 
     background: url(/images/bkgd.png) no-repeat rgb(30,30,30) fixed center center; 
     background-size: contain; 
    } 

Các tùy chọn khác mà tôi tìm thấy ít hữu ích là: background-size: length <widthpx> <heightpx> mà thiết lập kích thước tuyệt đối của hình nền. background-size: percentage <width> <height> hình nền là phần trăm kích thước cửa sổ. (xem w3schools.com's page)

Answer 5

Thêm này trong file css của bạn:

.custom_class 
{ 
    background-image: url(../img/beach.jpg); 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

và sau đó, trong .html của bạn (hoặc .php) nộp gọi lớp này như thế:

<div class="custom_class"> 
    ... 
</div> 

Answer 6

Sử dụng trực tiếp như thế này

.bg-div{ 
    background: url(../img/beach.jpg) no-repeat fixed 100% 100%; 
} 

hoặc gọi CSS riêng lẻ như

.bg-div{ 
    background-image: url(../img/beach.jpg); 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}