Thuộc tính background được dùng để định dạng nền (background) cho thành phần. Tag: background-clip, background-origin, background-size.

Danh ngôn cuộc sống:

• Bài viết được đăng bởi: Mr. Phan Nhan
• Ngày cập nhật bài viết: 13/05/2016
• Tổng lược xem trang: 151 / 1 khách
• Đánh giá bởi người dùng:

Thuộc tính background được dùng để định dạng nền (background) cho thành phần. Cấu trúc:

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

Thuộc tính background-clip với giá trị padding-box; border-box; content-box; Chúng có chức năng định vùng background được cắt bớt, giới bạn lại bao gồm cả vùng padding (không bao gồm border). HTML viết:

<html>
<head></head>
<body>
<div>bạn hãy nhập nội dung cần hiển thị vào đây.</div>
</body>
</html>
CSS viết:
div {
background: #ccc;
background-clip: padding-box; /*border-box; content-box;*/
border: 10px dotted #cc0000;
height: 150px;
padding: 20px;
width: 150px;
}

Thuộc tính background-origin với giá trị padding-box; border-box; content-box; Xác định giá trị tương đối của background giới hạn theo vùng chứa padding. HTML viết:

<html>
<head></head>
<body>
<div>bạn hãy nhập nội dung cần hiển thị vào đây.</div>
</body>
</html>
CSS viết:
div {
background: url(photos/demo.gif) no-repeat;
background-origin: padding-box;/*border-box; content-box;*/
border: 10px dotted #cc0000;
height: 150px;
padding: 20px;
width: 150px;
}

Thuộc tính background-size với giá trị 1 thành phần: Xác định giá trị của chiều cao, chiều rộng sẽ tự động chỉnh theo (auto). HTML viết:

<html>
<head></head>
<body>
<div>bạn hãy nhập nội dung cần hiển thị vào đây.</div>
</body>
</html>
CSS viết:
div {
background: url(photos/demo.gif) no-repeat;
background-size: 200px;
border: 1px solid #009;
height: 300px;
width: 500px;
}

Thuộc tính background-size với giá trị 2 thành phần: Thiết lập chiều chiều cao (height) và rộng (width) cho vùng background theo đơn vị. HTML viết:

<html>
<head></head>
<body>
<div>bạn hãy nhập nội dung cần hiển thị vào đây.</div>
</body>
</html>
CSS viết:
div {
background: url(photos/demo.gif) no-repeat;
background-size: 200px 250px;
border: 1px solid #009;
height: 300px;
width: 500px;
}

Thuộc tính background-size với giá trị 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).
HTML viết:

<html>
<head></head>
<body>
<div>bạn hãy nhập nội dung cần hiển thị vào đây.</div>
</body>
</html>
CSS viết:
div {
background: url(photos/demo.gif) no-repeat;
background-size: cover;
border: 1px solid #009;
height: 300px;
width: 500px;
}

Thuộc tính background-size với giá trị contain: 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 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>bạn hãy nhập nội dung cần hiển thị vào đây.</div>
</body>
</html>
CSS viết:
div {
background: url(photos/demo.gif) no-repeat;
background-size: contain;
border: 1px solid #009;
height: 300px;
width: 500px;
}

Thuộc tính background trong css3 có thể sử dụng để khai báo nhiều dạng background khác nhau, mỗi dạng cách nhau bởi dấu phẩy (,). Nhóm lệnh background nào khai báo trước thì background đó sẽ nằm trên, nhóm lệnh background nào khai báo sau sẽ nằm dưới, thứ tự từ trái sang phải. Cấu trúc:

tag {
background: nhóm lệnh background 1,nhóm lệnh background 2,...,nhóm lệnh background cuối;
}

HTML viết:

CSS viết:

div {
background: url(photos/demo.gif) no-repeat right bottom, url(photos/demo.gif) no-repeat center center, url(photos/demo.gif) repeat-x left top;
height: 250px;
}

Những bài viết được đăng mới nhất.

» Công cụ xóa dấu Tiếng việt