Kích thước css hình nền

Kiếm thu nhập bằng kỹ năng CSS của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.

Thuộc tính

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

html {
  background: url(greatimage.jpg);
  background-size: 300px 100px;
}

Đó là một ví dụ về cú pháp hai giá trị cho kích thước nền. Có bốn cú pháp khác nhau mà bạn có thể sử dụng với thuộc tính này. cú pháp từ khóa, cú pháp một giá trị, cú pháp hai giá trị và cú pháp nhiều nền

từ khóa

Ngoài giá trị mặc định (

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

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

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

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

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

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

Từ khóa mặc định —

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

Một giá trị

Nếu bạn chỉ cung cấp một giá trị (e. g.

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

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

Hai giá trị

Nếu bạn cung cấp hai giá trị, thì giá trị đầu tiên đặt chiều rộng của hình nền và giá trị thứ hai đặt chiều cao. Giống như cú pháp giá trị đơn, bạn có thể sử dụng bất kỳ đơn vị đo lường nào bạn muốn

Nhiều hình ảnh

Bạn cũng có thể kết hợp bất kỳ phương pháp nào ở trên và áp dụng chúng cho nhiều hình ảnh, chỉ bằng cách thêm dấu phẩy giữa mỗi cú pháp. Ví dụ

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

Lưu ý đến thứ tự xếp chồng hình nền khi sử dụng nhiều hình ảnh

Thử nghiệm

Bản trình diễn này hiển thị các ví dụ về

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

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

Bài đăng này ban đầu được xuất bản vào ngày 21 tháng 8 năm 2009 và hiện được cập nhật vì nó đã được sửa đổi hoàn toàn. Cả hai phương thức ban đầu đều bị xóa và hiện được thay thế bằng bốn phương thức mới

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

• Lấp đầy toàn bộ trang bằng hình ảnh, không có khoảng trắng
• Tỷ lệ hình ảnh khi cần thiết
• Giữ nguyên tỷ lệ hình ảnh (tỷ lệ khung hình)
• Hình ảnh được căn giữa trên 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ố shenanigans ưa thích như Flash

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

Chúng tôi có thể làm điều này hoàn toàn thông qua CSS nhờ thuộc tính

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

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

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

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

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 Sao cũng được +
• IE9+
• Opera 10+ (Opera 9. 5 kích thước nền được hỗ trợ 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)

Xem bản trình diễn

Cập nhật. Cảm ơn Goltzman trong các nhận xét đã chỉ ra một bài viết về Kết nối nhà phát triển Adobe có một số mã để làm cho IE cũng có nền

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

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

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ỳ thứ gì khác (như Pierre ở trên) nên cố gắng không sử dụng chúng trên phần tử

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

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

Kỹ thuật chỉ CSS #1

Như thường lệ, xin chân thành cảm ơn Doug Neiner về phiên bản thay thế này. Ở đây, chúng tôi sử dụng một phần tử nội tuyến, có thể thay đổi kích thước trong bất kỳ trình duyệt nào. Chúng tôi đặt

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

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

Điều đặ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 kết hợp tỷ lệ phần trăm trái và âm trái

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

Đây là CSS

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

hoạt động trong

• Bất kỳ phiên bản nào của trình duyệt tốt. Safari/Chrome/Opera/Firefox
• IE6. Bị hỏng – nhưng có thể sửa được nếu bạn sử dụng một số loại miếng chêm định vị cố định
• TỨC LÀ 7/8. Hầu hết 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
• IE9. Làm

Xem bản trình diễn

Kỹ thuật chỉ CSS #2

Một cách khá đơn giản để xử lý việc 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ó 100%

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

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

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

Tuy nhiên, điều này không căn giữa hình ảnh và đó là một mong muốn khá phổ biến ở đây… Vì vậy, chúng ta có thể khắc phục điều đó bằng cách bao hình ảnh trong một div. Div đó chúng ta sẽ làm 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ệ khung hình của nó và bao phủ cửa sổ trình duyệt có thể nhìn thấy cũng như tâm điểm chết của hình ảnh đó

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

Tín dụng cho Corey Worrell cho khái niệm này

hoạt động trong

• Safari/Chrome/Firefox (không test xa lắm, nhưng các bản gần đây vẫn ổn)
• IE8+
• 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 biết tại sao)
• Peter VanWylen đã viết để nói rằng nếu bạn thêm hình ảnh qua JavaScript, img cần phải có chiều rộng. tự động; . tự động;

Xem bản trình diễn

Cập nhật tháng 1 năm 2018. Bạn đang cố gắng để tính năng này hoạt động trên Android? . 100%; . ẩn giấu; . Đoạn trích đầy đủ là

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

Tôi đã kiểm tra nó, và nó có vẻ hoàn toàn chính xác. Không có nó / Với nó

phương pháp 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ệ khung hình của hình ảnh (nội tuyến

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

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

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

Điều này không tính đến 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ể vào IE6 với miếng chêm vị trí cố định)
• Hầu hết mọi trình duyệt máy tính để bàn khác

Xem bản trình diễn

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

Trước tiên, bạn sẽ tạo các hình ảnh như

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

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

Nếu bạn không thích gif shim (cá nhân tôi nghĩ nó ổn vì nó không phải là "nội dung" mà 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 cho điều đó

Sau đó, bạn kiểm tra chiều rộng màn hình và đặt

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

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

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

Vui thích

Nếu bạn sử dụng cái 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 luôn mát mẻ để xem các kỹ thuật “trong tự nhiên. ”

Tải tập tin

Vì lợi ích của hậu thế, có một ví dụ khác ở đây có tên là

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

Nền CSS là gì

Kích thước hình nền của tôi nên là bao nhiêu?

Làm cách nào để đặt kích thước hình ảnh trong CSS?