Có một thuộc tính CSS3 cho việc này, cụ thể là background-size( kiểm tra tính tương thích ). Mặc dù người ta có thể đặt giá trị độ dài, nhưng nó thường được sử dụng với các giá trị đặc biệt containvà cover. Trong trường hợp cụ thể của bạn, bạn nên sử dụng cover:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
Eggsplanation cho containvàcover
Xin lỗi vì sự chơi chữ tồi, nhưng tôi sẽ sử dụng bức tranh trong ngày của Biswarup Ganguly để trình diễn. Hãy nói rằng đây là màn hình của bạn và vùng màu xám nằm ngoài màn hình hiển thị của bạn. Để trình diễn, tôi sẽ giả sử tỷ lệ 16x9.
Chúng tôi muốn sử dụng hình ảnh nói trên trong ngày làm nền. Tuy nhiên, chúng tôi đã cắt hình ảnh thành 4x3 vì một số lý do. Chúng tôi có thể đặt thuộc background-sizetính theo một số độ dài cố định, nhưng chúng tôi sẽ tập trung vào containvà cover. Lưu ý rằng tôi cũng cho rằng chúng tôi đã không thu thập chiều rộng và / hoặc chiều cao của body.
contain
contain
Chia tỷ lệ hình ảnh, trong khi duy trì tỷ lệ khung hình bên trong của nó (nếu có), đến kích thước lớn nhất sao cho cả chiều rộng và chiều cao của nó có thể vừa với khu vực định vị nền.
Điều này đảm bảo rằng hình ảnh nền luôn được chứa hoàn toàn trong khu vực định vị nền, tuy nhiên, có thể có một số khoảng trống chứa đầy của bạn background-colortrong trường hợp này:
cover
cover
Chia tỷ lệ hình ảnh, trong khi duy trì tỷ lệ khung hình bên trong của nó (nếu có), đến kích thước nhỏ nhất sao cho cả chiều rộng và chiều cao của nó có thể bao phủ hoàn toàn khu vực định vị nền.
Điều này đảm bảo rằng hình ảnh nền được bao phủ mọi thứ. Sẽ không thể nhìn thấy background-color, tuy nhiên tùy thuộc vào tỷ lệ của màn hình, một phần lớn hình ảnh của bạn có thể bị cắt:
Trình diễn với mã thực tế
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
html, body { height: 100%; }giúp được không? Ngoài ra, ho .