Previous Lesson Next Lesson

Thuộc tính background trong CSS3

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).

Ví dụ

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

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