CSS3: Sửa kích thước ảnh nền
Giải phóng thời gian, khai phóng năng lực
Thuộc tính background-size của CSS3 cho phép chỉnh sửa kích thước ảnh nền của trang web theo ý của bạn một cách rất đơn giản mà không cần phải chỉnh sửa kích thước ảnh bằng công cụ chuyên dụng.
Trình duyệt hỗ trợ
IE9+, FireFox, Chrome, Safari và Opera đều hỗ trợ hai thuộc tính background-size.
background-size cho phép bạn xác định kích thước của ảnh nền. Bạn có thể sử dụng đơn vị là pixel (px) hay đơn vị là phần trăm (%) cho kích thước của ảnh nền thông qua thuộc tính background-size, nếu bạn sử dụng đơn vị là % thì kích thước của ảnh nền sẽ phụ thuộc vào độ rộng và độ cao của phần tử chứa nó.
Cú pháp
background-size: [Rộng] [Cao];
Hoặc:
background-size: [Rộng];
, trong đó nếu chỉ có giá trị độ rộng mà không có độ cao thì độ cao sẽ tự được được xác định theo tỷ lệ tương ứng với độ rộng.
Ví dụ 1: Ví dụ này sẽ dùng ảnh làm nền trong đó đơn vị của kích thước là px.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#d1{
width:900px;
height:300px;
border:green thin solid;
background:url(https://lh4.googleusercontent.com/-mNwW2oSwNk4/UxdgRFc0TfI/AAAAAAAAARk/PvY72Wz8jOI/w140-h104-p/css3-logo.jpg);
background-size:259px 194px;
background-repeat:no-repeat;
padding-top:40px;
color:red;
}
</style>
</head>
<body>
<div id="d1">
<p>CSS3 nằm gọn trong lòng bàn tay bạn!</p>
</div>
</body>
</html>
Ví dụ 2: Ví dụ này tương tự như ví dụ trên nhưng đơn vị của kích thước ảnh nền là %.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#d1{
width:900px;
height:300px;
border:green thin solid;
background:url(https://lh4.googleusercontent.com/-mNwW2oSwNk4/UxdgRFc0TfI/AAAAAAAAARk/PvY72Wz8jOI/w140-h104-p/css3-logo.jpg);
background-size:50%;
background-repeat:no-repeat;
padding-top:40px;
color:red;
}
</style>
</head>
<body>
<div id="d1">
<p>CSS3 nằm gọn trong lòng bàn tay bạn!</p>
</div>
</body>
</html>
Giải phóng thời gian, khai phóng năng lực