9
Phương pháp hay nhất để đặt hình nền ở giữa và 100% (sao cho nó lấp đầy màn hình, nhưng vẫn còn giữ nguyên tỷ lệ khung hình) trong tất cả các trình duyệt?Hình nền ở giữa và 100% trong tất cả các trình duyệt
A
Trả lời
3
Chọn một bài đăng cũ, vì có phương pháp mới để thực hiện điều đó với hỗ trợ trình duyệt tốt.
Sử dụng background-image như thế này:
background-size:cover;
background-position:center;
này sẽ không phá hủy các tỷ lệ của hình ảnh nhưng quy mô nó như là tốt nhất có thể không bao giờ hiển thị bất kỳ thanh màu đen (hay bất cứ những sẽ ở chế độ nền).
Hỗ trợ trình duyệt gần như hoàn hảo như bạn có thể thấy trên Can I use it?. Opera Mini có thể là một vấn đề, nhưng trình duyệt có thể sẽ sớm được thay thế bởi Vivaldi.
Tóm lại, tôi nghĩ rằng đây chắc chắn là con đường để đi, vì nó là giải pháp sạch và đáng tin cậy nhất và rất dễ chỉnh sửa với JS.
+0
Cảm ơn bạn đã cập nhật một chuỗi cũ. Đây là cách tôi làm điều đó ngày hôm nay là tốt. – jamietelin
0
Tôi không biết cách đạt được điều này bằng cách đặt nó làm hình nền. Tuy nhiên, bạn có thể có một hình ảnh hoàn toàn được định vị
<div style="position:absolute; left:0;right:0;bottom:0;top:0;display:table;vertical-align:middle;text-align:center">
<img style="max-width:100%; max-height:100%" />
</div>
+1
Bảng 'display: table;' là gì? – ANeves
+0
để căn chỉnh theo chiều dọc hoạt động. nó cũng có thể được hiển thị: ô bảng – Kasturi
+0
Tôi không nghĩ rằng bạn cần nó để căn chỉnh theo chiều dọc để làm việc, dọc-align là nghĩa vụ phải làm việc trên bất kỳ yếu tố nội tuyến: http://www.htmldog.com/reference/ cssproperties/vertical-align/ – ANeves
0
Bạn có thể sử dụng CSS3 background-size property, nhưng tôi không chắc nó được hỗ trợ như thế nào. Tôi nghĩ rằng hầu hết trong số họ làm nhưng với tiền tố:
-o-background-size
-webkit-background-size
-khtml-background-size
8
Cách tốt nhất là để không để làm những gì bạn muốn làm.
Bằng cách chỉ định 100% bạn sẽ giãn (làm méo) hình ảnh.
Cách tốt nhất để có một đơn giản, nền trung tâm là như thế này:
body {
background-image:url(Images/MyBG.png);
background-position:center top;
background-repeat:no-repeat
}
EDIT:
Bây giờ bạn có thể nhắm mục tiêu nghị quyết khác nhau và sử dụng một hình nền khác nhau, tùy thuộc vào kích thước bằng cách chỉ định biểu định kiểu phụ thuộc vào độ phân giải. Bạn có thể sử dụng các bảng định kiểu riêng biệt chỉ để xác định một phần tử nền với các tệp khác nhau trong mỗi tệp.
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
Xem: http://css-tricks.com/resolution-specific-stylesheets/
hoặc W3C CSS media query spec.
+1
Vấn đề với giải pháp này là tôi cần phải tạo nhiều, nhiều hình ảnh với độ phân giải khác nhau. – jamietelin
2
Đây là một bài tuyệt vời trên hai phương pháp để đạt được cái nhìn này:
+0
Tôi đã làm một phiên bản sửa đổi của Kỹ thuật số 2, hoạt động loại okey, kiểm tra câu trả lời của riêng tôi cho câu hỏi. – jamietelin
9
giải pháp tốt nhất mà tôi đã quản lý để thực hiện cho đến nay là như sau;
//CSS
<style type="text/css">
body {
margin:0; padding:0;
}
html, body, #bg {
height:100%;
width:100%;
}
#bg {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
z-index:0;
}
#bg img {
width:100%;
min-width:100%;
min-height:100%;
}
#content {
z-index:1;
}
</style>
//HTML
<body>
<div id="bg">
<img style="display:block;" src="bgimage.jpg">
</div>
<div id="content">
//Rest of content
</div>
</body>
Đây có phải là cách tốt nhất không? Bất cứ ai nhìn thấy bất kỳ vấn đề với làm theo cách này?
Cảm ơn bạn đã dành thời gian!
"Tất cả các trình duyệt" là gì? Nó có bao gồm IE6 không? (Vì lợi ích của chính bạn, tốt hơn là không.) – ANeves
Không, nhưng tất cả các trình duyệt được cập nhật :) Vì vậy, IE8, Firefox 3, Safari 4 vv… và tất cả ý tôi là tất cả các trình duyệt chính không phải là Camino, Miro và Sớm. – jamietelin