Thuộc tính background

Định nghĩa và sử dụng

Thuộc tính background trong css3 dùng để định dạng các dạng background ngoài dạng đã được định nghĩa ở css2 (Xem thêm về background trong css2).

Cấu trúc:

tag {
    thuộc tính background: giá trị;
}

Thuộc tính của background trong css3:

Thuộc tính giá trị Ví dụ Mô tả
background-clip padding-box background-clip: padding-box; Xác định vùng background được cắt bớt, giới hạn lại theo vùng chứa padding (không bao gồm border).
border-box background-clip: border-box; Xác định vùng background được cắt bớt, giới hạn lại theo vùng chứa border.
content-box background-clip: content-box; Xác định vùng background được cắt bớt, giới hạn lại theo vùng chứa nội dung.
background-origin padding-box background-origin: padding-box; Xác định giá trị tương đối của background giới hạn theo vùng chứa padding (không bao gồm border).
border-box background-origin: border-box; Xác định giá trị tương đối của background giới hạn theo vùng chứa border.
content-box background-origin: content-box; Xác định giá trị tương đối của background giới hạn theo vùng chứa nội dung.
background-size đơn vị (1 thành phần) background-size: 100px; Xác định chiều rộng theo đơn vị, chiều cao sẽ tự động chỉnh theo tỷ lệ.
đơn vị (2 thành phần) background-size: 100px 50px; Xác định chiều rộng và chiều cao cho vùng background theo đơn vị.
% (1 thành phần) background-size: 50%; Xác định chiều rộng theo % của nội dung bao ngoài, chiều cao sẽ tự động chỉnh theo tỷ lệ.
% (2 thành phần) background-size: 100% 50%; Xác định chiều rộng và chiều cao cho vùng background theo % của nội dung bao ngoài.
cover background-size: cover;

Tự chia tỷ lệ tới kích thước lớn nhất của chiều rộng hoặc chiều cao để phù hợp với vùng nội dung.

  • Nếu chiều cao lớn hơn chiều rộng thì background sẽ chỉnh 100% theo chiều cao, chiều rộng sẽ tự động chỉnh tỷ lệ cho phù hợp (auto).
  • Ngược lại nếu chiều rộng lớn hơn chiều cao thì background sẽ chỉnh 100% theo chiều rộng, chiều cao sẽ tự động chỉnh tỷ lệ cho phù hợp (auto)
contain background-size: contain;

Tự chia tỷ lệ tới kích thước nhỏ nhất của chiều rộng hoặc chiều cao để phù hợp với vùng nội dung.

  • Nếu chiều cao nhỏ hơn chiều rộng thì background sẽ chỉnh 100% theo chiều cao, chiều rộng sẽ tự động chỉnh tỷ lệ cho phù hợp (auto).
  • Ngược lại nếu chiều rộng nhỏ hơn chiều cao thì background sẽ chỉnh 100% theo chiều rộng, chiều cao sẽ tự động chỉnh tỷ lệ cho phù hợp (auto).

HTML viết:

<html>
<head></head>
<body>
<div>background-clip background-clip background-clip background-clip background-clip.</div>
</body>
</html>

CSS viết:

div {
    background: #ccc;
    border: 10px dotted #cc0000;
    height: 150px;
    padding: 20px;
    width: 150px;
}

Hiển thị trình duyệt khi chưa sử dụng background-clip:

background-clip background-clip background-clip background-clip background-clip.

Thêm thuộc tính background-clip với giá trị padding-box vào CSS, ta có:

div {
    background: #ccc;
    background-clip: padding-box;
    border: 10px dotted #cc0000;
    height: 150px;
    padding: 20px;
    width: 150px;
}

Hiển thị trình duyệt khi sử dụng background-clip: padding-box:

background-clip background-clip background-clip background-clip background-clip.

Trình duyệt và hệ điều hành hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính background:

  Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
background-clip 9 4 10.5 10 5.1
-webkit-
3.2 2.1 7.5
background-origin 9 4 10.5 4 5.1 3.2 2.1 7.5
background-size 9 4 10.5 4 5.1 3.2 2.1 7.5