88

Tôi muốn đặt hình nền cho các div khác nhau, nhưng vấn đề của tôi là:

  1. Kích thước của hình ảnh được cố định (60px).
  2. Thay đổi kích thước của div

Làm thế nào tôi có thể kéo dài hình nền để lấp đầy toàn bộ nền của div?

#div2{
  background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
  height:180px;
  width:200px;
  border: 1px solid red;
}

Kiểm tra mã ở đây.

|
122

Thêm vào

background-size:100% 100%;

để css của bạn bên dưới hình nền.

Bạn cũng có thể chỉ định kích thước chính xác, nghĩa là:

background-size: 30px 40px;

Ở đây: JSFiddle

|
66

Bạn có thể dùng:

background-size: cover;

Hoặc chỉ sử dụng một hình ảnh nền lớn với:

background: url('../images/teaser.jpg') no-repeat center #eee;
|
39

CSS3 hiện đại (được khuyên dùng cho tương lai & thăm dò. Giải pháp tốt nhất)

.selector{
   background-size: cover;
   /* streches background WITHOUT deformation so it would fill the background space,
      it may crop the image if the image's dimensions are in different ratio,
      than the element dimensions. */
}

Tối đa kéo dài mà không cắt xén cũng không biến dạng (có thể không lấp đầy backg.) : background-size: contain;
Lực căng tuyệt đối (có thể gây biến dạng, nhưng không cắt xén) : background-size: 100% 100%;

Cách "cũ" CSS "luôn hoạt động"

Hình ảnh định vị tuyệt đối như là một đứa con đầu tiên của cha mẹ (vị trí tương đối) và kéo nó đến kích thước cha mẹ.

HTML

<div class="selector">
   <img src="path.extension" alt="alt text">
   <!-- some other content -->
</div>

Tương đương với CSS3 background-size: cover;:

Để đạt được điều này một cách linh hoạt, bạn sẽ phải sử dụng ngược lại phương thức chứa phương thức thay thế (xem bên dưới) và nếu bạn cần căn giữa hình ảnh bị cắt, bạn sẽ cần một JavaScript để thực hiện điều đó một cách linh hoạt - ví dụ: sử dụng jQuery:

$('.selector img').each(function(){ 
   $(this).css({ 
      "left": "50%", 
      "margin-left": "-"+( $(this).width()/2 )+"px", 
      "top": "50%", 
      "margin-top": "-"+( $(this).height()/2 )+"px" 
   }); 
});

Ví dụ thực tế:

Tương đương với CSS3 background-size: contain;:

Điều này có thể là một chút khó khăn - kích thước của nền của bạn sẽ tràn cha mẹ sẽ có CSS ​​được đặt thành 100% so với nền khác để tự động. Ví dụ thực tế:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: auto;
   /* -- OR -- */
   /* width: auto; 
      height: 100%; */
}

Tương đương với CSS3 background-size: 100% 100%;:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
}

PS: Để thực hiện tương đương độ che phủ / chứa theo cách "cũ" một cách hoàn toàn năng động (vì vậy bạn sẽ không phải quan tâm đến tỷ lệ tràn / tỷ lệ), bạn sẽ phải sử dụng javascript để phát hiện các tỷ lệ cho bạn và đặt kích thước là không phù hợp. ..

|
24

Đối với điều này, bạn có thể sử dụng thuộc tính CSS3 background-size. Viết như thế này:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

Kiểm tra điều này: http://jsfiddle.net/qdzaw/1/

|
20

Bạn có thể thêm:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

Bạn có thể đọc thêm về nó ở đây: kích thước nền css3

|
  • 1

    Tốt hơn nhiều so với câu trả lời được chấp nhận, với điều này cho bạn thấy rằng kích thước nền chấp nhận 2 giá trị cho chiều rộng và chiều cao.

    – Tạ Hoàng Ngôn 14:30:08 01/08/2013
  • 1

    kích thước nền là một css3 và không được hỗ trợ trong tất cả các trình duyệt

    – Ngô Khánh Tâm 16:22:53 24/11/2016
2
body{
  margin:0;
  background:url('image.png') no-repeat 50% 50% fixed;
  background-size: cover;
}
|
1

Sử dụng: kích thước nền: 100% 100%; Để làm hình nền cho phù hợp với kích thước div.

|
  • 1

    Đây là những gì tôi đang tìm kiếm - kéo dài để phù hợp mà không liên quan đến tỷ lệ khung hình ban đầu. Cảm ơn.

    – Đỗ Yến Oanh 14:47:27 19/09/2018
1

bằng cách sử dụng tài sản css:

background-size: cover;
|
0

Hãy thử một cái gì đó như thế này:

div {
    background-image: url(../img/picture1.jpg);
    height: 30em;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
}
|
0

Để giữ tỷ lệ khung hình, sử dụng background-size: 100% auto;

div {
    background-image: url('image.jpg');
    background-size: 100% auto;
    width: 150px;
    height: 300px;
}
|

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.