Cách sử dụng image background đẹp

Cách sử dụng image background đẹp

Rate this post

Mục tiêu ở đây là background trên một trang web luôn bao phủ toàn bộ cửa sổ trình duyệt. Hãy đặt một số chi tiết cụ thể về nó:

  • Điền toàn bộ trang bằng hình ảnh, không có khoảng trắng
  • Cân hình ảnh khi cần thiết
  • Giữ lại tỷ lệ hình ảnh (tỷ lệ khung hình)
  • Hình ảnh được căn giữa trang
  • Không gây ra thanh cuộn
  • Tương thích với nhiều trình duyệt nhất có thể
  • Không phải là một số trò tai quái lạ lùng như Flash

Các bài viết liên quan:

Cách sử dụng image background đẹp

Cách CSS3 tuyệt vời, dễ dàng, tiến bộ

Chúng ta có thể thực hiện điều này hoàn toàn thông qua CSS nhờ thuộc tính background-size hiện có trong CSS3. Chúng tôi sẽ sử dụng phần tử html (tốt hơn phần thân vì nó luôn phải bằng chiều cao của cửa sổ trình duyệt ít nhất). Chúng tôi đặt nền cố định và chính giữa trên đó, sau đó điều chỉnh kích thước của nó bằng cách sử dụng kích thước nền được đặt thành từ khóa cover.

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

Hoạt động trong:

  • Safari 3+
  • Chrome Dù +
  • IE 9+
  • Opera 10+ (kích thước nền hỗ trợ Opera 9.5 nhưng không hỗ trợ từ khóa)
  • Firefox 3.6+ (Firefox 4 hỗ trợ phiên bản có tiền tố không phải của nhà cung cấp)

Cập nhật: Cảm ơn Goltzman trong các nhận xét vì đã chỉ ra một bài viết về Kết nối nhà phát triển Adobe, trong đó có một số mã để tạo background trang bìa cho IE:

Nhưng cẩn thận, độc giả Pierre Orsander cho biết họ đã thử điều này và gặp một số vấn đề với các liên kết trên trang bị chết.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Cập nhật: Matt Litherland viết thư để nói rằng bất kỳ ai đang cố gắng sử dụng các bộ lọc IE ở trên và gặp sự cố với thanh cuộn hoặc liên kết chết hoặc bất kỳ điều gì khác (như Pierre ở trên) nên thử KHÔNG sử dụng chúng trên phần tử html hoặc body. Nhưng thay vào đó là một div vị trí cố định với 100% chiều rộng và chiều cao.

Cách sử dụng CSS # 1

Như thường lệ, xin gửi lời cảm ơn sâu sắc tới Doug Neiner về phiên bản thay thế này. Ở đây chúng tôi sử dụng phần tử <img> nội tuyến, phần tử này sẽ có thể thay đổi kích thước trong bất kỳ trình duyệt nào. Chúng tôi đặt chiều cao tối thiểu để giữ cho nó lấp đầy cửa sổ trình duyệt theo chiều dọc và đặt chiều rộng 100% để giữ cho nó lấp đầy theo chiều ngang. Chúng tôi cũng đặt chiều rộng tối thiểu của chiều rộng của hình ảnh để hình ảnh không bao giờ nhỏ hơn thực tế.

Bí quyết đặc biệt thông minh là sử dụng truy vấn phương tiện để kiểm tra xem cửa sổ trình duyệt có nhỏ hơn hình ảnh hay không và sử dụng phần trăm kết hợp giữa lề trái và âm trái để giữ cho nó được căn giữa.

Đây là CSS:

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Hoạt động trong:

  • Bất kỳ phiên bản trình duyệt nào tốt: Safari / Chrome / Opera / Firefox
  • IE 6: Borked – nhưng có thể sửa được nếu bạn sử dụng một số loại miếng đệm định vị cố định
  • IE 7/8: Chủ yếu hoạt động, không căn giữa ở kích thước nhỏ nhưng lấp đầy màn hình tốt
  • IE 9: Hoạt động

Cách sử dụng CSS # 2

Một cách khá đơn giản để xử lý điều này là đặt một hình ảnh nội tuyến trên trang, cố định vị trí của nó ở phía trên bên trái và cung cấp cho nó chiều rộng tối thiểu và chiều cao tối thiểu là 100%, giữ nguyên tỷ lệ co của nó.

<img src="images/bg.jpg" id="bg" alt="">
#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
	
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

Tuy nhiên, điều này không làm chính giữa hình ảnh và đó là mong muốn khá phổ biến ở đây… Vì vậy, chúng tôi có thể khắc phục điều đó bằng cách bao bọc hình ảnh trong một div. Div đó mà chúng tôi sẽ tạo ra lớn gấp đôi cửa sổ trình duyệt. Sau đó, hình ảnh sẽ được đặt, vẫn giữ nguyên tỷ lệ co của nó và che cửa sổ trình duyệt có thể nhìn thấy cũng như phần trung tâm của hình ảnh đó.

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>
#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

Tín dụng cho Corey Worrell cho khái niệm về điều này.

Hoạt động trong:

  • Safari / Chrome / Firefox (không thử nghiệm trước đây, nhưng các phiên bản gần đây vẫn ổn)
  • IE 8+
  • Opera (bất kỳ phiên bản nào) và IE đều bị lỗi theo cùng một cách (đặt sai vị trí, không rõ tại sao)
  • Peter VanWylen đã viết thư để nói rằng nếu bạn thêm hình ảnh qua JavaScript, img cần phải có width: auto; và chiều cao: auto; để làm việc trong IE 8, 9 hoặc 10.

Cập nhật tháng 1 năm 2018: Bạn đang cố gắng làm cho tính năng này hoạt động trên Android? JL García đã viết thư cho tôi nói rằng anh ấy cần tăng thêm chiều cao: 100%; và tràn: ẩn; vào phần tử html để nó hoạt động. Đoạn mã đầy đủ là:

html {
  background: url(images/bg.jpg) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

Tôi đã thử nghiệm nó, và nó có vẻ hoàn toàn chính xác. Nếu không có nó / Với nó.

Cách sử dụng jQuery

Toàn bộ ý tưởng này trở nên dễ dàng hơn rất nhiều (từ góc độ CSS) nếu chúng ta biết liệu tỷ lệ co của hình ảnh (nội tuyến <img> mà chúng tôi định sử dụng làm nền) lớn hơn hay nhỏ hơn tỷ lệ co hiện tại của cửa sổ trình duyệt. Nếu nó thấp hơn, chúng ta chỉ có thể đặt chiều rộng thành 100% trên hình ảnh và biết rằng nó sẽ lấp đầy cả chiều cao và chiều rộng. Nếu nó cao hơn, chúng tôi chỉ có thể đặt chiều cao thành 100% và biết rằng nó sẽ lấp đầy cả chiều cao và chiều rộng.

Chúng tôi có quyền truy cập thông tin này thông qua JavaScript. Như thường lệ ở đây, tôi thích dựa vào jQuery.

<img src="images/bg.jpg" id="bg" alt="">
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
$(window).load(function() {    

	var theWindow        = $(window),
	    $bg              = $("#bg"),
	    aspectRatio      = $bg.width() / $bg.height();
	    			    		
	function resizeBg() {
		
		if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
		    $bg
		    	.removeClass()
		    	.addClass('bgheight');
		} else {
		    $bg
		    	.removeClass()
		    	.addClass('bgwidth');
		}
					
	}
	                   			
	theWindow.resize(resizeBg).trigger("resize");

});

Điều này không giải thích cho việc căn giữa, nhưng bạn chắc chắn có thể thay đổi điều này để làm điều đó. Tín dụng cho Koen Haarbosch cho khái niệm đằng sau ý tưởng này.

Hoạt động trong:

  • IE7 + (có thể có trong IE6 với một miếng đệm vị trí cố định)
  • Hầu hết mọi trình duyệt trên máy tính để bàn khác

Cập nhật (tháng 6 năm 2012): Người đọc Craig Manley viết bằng kỹ thuật tải hình ảnh nền có kích thước thích hợp theo màn hình. Như trong, không tải một số background rộng 1900px cho iPhone.

Đầu tiên, bạn sẽ tạo các hình ảnh như 1024.jpg, 1280.jpg, 1366.jpg, v.v. Sau đó, thay vì tải một img, bạn sẽ tải một miếng đệm.

<img id="bg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" style="position: fixed; left: 0; top: 0" />

Nếu bạn không thích gif shim (cá nhân tôi nghĩ rằng không sao cả vì nó không phải là “nội dung” mà nó là nền), bạn có thể tải lên một trong những hình ảnh thực để thay thế. Mã này sẽ giải thích điều đó.

Sau đó, bạn kiểm tra chiều rộng màn hình và đặt src của hình ảnh dựa trên nó. Đoạn mã dưới đây thực hiện việc thay đổi kích thước mà bạn có thể muốn hoặc không. Bạn chỉ có thể chạy mã một lần nếu bạn muốn.

(function() {

var win = $(window);

win.resize(function() {
    
    var win_w = win.width(),
        win_h = win.height(),
        $bg    = $("#bg");

    // Load narrowest background image based on 
    // viewport width, but never load anything narrower 
    // that what's already loaded if anything.
    var available = [
      1024, 1280, 1366,
      1400, 1680, 1920,
      2560, 3840, 4860
    ];

    var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null;
    
    if (!current || ((current < win_w) && (current < available[available.length - 1]))) {
      
      var chosen = available[available.length - 1];
      
      for (var i=0; i<available.length; i++) {
        if (available[i] >= win_w) {
          chosen = available[i];
          break;
        }
      }
      
      // Set the new image
      $bg.attr('src', '/img/bg/' + chosen + '.jpg');
      
      // for testing...
      // console.log('Chosen background: ' + chosen);
      
    }

    // Determine whether width or height should be 100%
    if ((win_w / win_h) < ($bg.width() / $bg.height())) {
      $bg.css({height: '100%', width: 'auto'});
    } else {
      $bg.css({width: '100%', height: 'auto'});
    }
    
  }).resize();
  
})(jQuery);

Lưu ý rằng chiều rộng màn hình không phải là thông tin tốt duy nhất có thể có khi chọn kích thước hình ảnh. Xem bài viết này.

Kết luận

Nếu bạn sử dụng điều này, vui lòng để lại kỹ thuật bạn đã sử dụng và nếu bạn thay đổi nó theo bất kỳ cách nào trong phần bình luận bên dưới. Luôn thú vị khi xem các kỹ thuật “trong tự nhiên”.

Chỉ vì lợi ích của hậu thế, có một ví dụ khác ở đây được gọi là table.php sử dụng một kỹ thuật cũ từng là một phần của bài viết này. Nó có một số thông minh, nhưng không hoàn toàn tốt bằng cả kỹ thuật CSS hiện đã được trình bày ở trên

Leave a Reply