Với phiên bản CSS3, bạn có thể áp dụng nhiều hình loại background cho các phần tử.
CSS3 cung cấp một số thuộc tính mới để có thể chỉnh sửa background của một phần tử như cắt nền, nhiều nền và tùy chọn điều chỉnh kích thước nền.
Bên dưới đây sẽ mô tả cho bạn tất cả các tính năng mới về background trong CSS3, để biết các thuộc tính khác liên quan đến background, vui lòng xem lại bài hướng dẫn Backgroud trong CSS.
Thuộc tính background-size trong CSS3
Thuộc tính background-size có thể được sử dụng để chỉ định kích thước của hình nền. Trước CSS3, kích thước của hình nền được xác định bởi kích thước thực của hình ảnh. Kích thước hình nền có thể được chỉ định bằng cách sử dụng pixel hoặc giá trị % cũng như các từ khóa tự auto, contain và cover.
Lưu ý: Thuộc tính này không chấp nhận giá trị âm.
HTML:
<div class = "box"></div>CSS:
.box {
width: 250px;
height: 150px;
background: url("images/girl.png") no-repeat;
background-size: contain;
border: 6px solid #333;
}Bạn hãy chọn hình ảnh lớn một chút để thấy rõ sự tác động của giá trị contain trong background-size.
Mẹo: Thuộc tính background-size thường được sử dụng để tạo hình ảnh nền có kích thước đầy đủ chia tỷ lệ theo kích thước của chế độ xem hoặc tùy chọn của trình duyệt.
Thuộc tính background-clip trong CSS3
Thuộc tính background-clip có thể được sử dụng để chỉ định xem nền của phần tử có mở rộng ra đường viền hay không. Thuộc tính background-clip có thể nhận ba giá trị: border-box, padding-box, content-box.
Trong đó:
- border-box: Nền của phần tử bao gồm cả đường viền
- padding-box: Nền của phần tử bao gồm cả phần đệm (Không bao gồm đường viền)
- content-box: Nền của phần tử chỉ bao gồm phần nội dung (Không bao gồm phần padding, border)
HTML:
<h2>Mặc định</h2>
<div class="box"></div>
<h2>Sử dụng giá trị border-box</h2>
<div class="box clip1"></div>
<h2>Sử dụng giá trị padding-box</h2>
<div class="box clip2"></div>
<h2>Sử dụng giá trị content-box</h2>
<div class="box clip3"></div>CSS:
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: orange;
}
.clip1 {
background-clip: border-box;
}
.clip2 {
background-clip: padding-box;
}
.clip3 {
background-clip: content-box;
}Bạn có thể xem lại bài viết CSS Box Model để biết rõ hơn.
Thuộc tính background-origin trong CSS3
Thuộc tính background-origin có thể được sử dụng để chỉ định vùng định vị của ảnh nền. Nó có thể nhận các giá trị giống như thuộc tính background-clip: border-box, padding-box, content-box.
HTML:
<div class="box"></div>CSS:
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: url("/examples/girl.png") no-repeat;
background-size: contain;
background-origin: content-box;
} Lưu ý: Thuộc tính background-origin bị bỏ qua nếu giá trị của thuộc tính background-attachment được chỉ định là ‘fixed’.
Tạo nhiều background trong CSS3
CSS3 cung cấp cho bạn khả năng thêm nhiều nền vào một phần tử duy nhất. Các nền được xếp chồng lên nhau. Số lượng lớp được xác định bởi số lượng giá trị được phân tách bằng dấu phẩy trong thuộc tính background-image hoặc background nền.
HTML:
<div class="box"></div>CSS:
.box {
width: 100%;
height: 500px;
background: url("/images/girl.png") no-repeat center, url("/images/orange.png") no-repeat center, url("/images/flower.png") no-repeat 10% 30%, lightblue;
}Giá trị đầu tiên trong danh sách hình nền được phân tách bằng dấu phẩy, tức là hình nền ‘girl.png’ sẽ xuất hiện ở trên cùng và giá trị cuối cùng, tức là màu ‘lightblue’ sẽ xuất hiện ở dưới cùng. Chỉ nền cuối cùng mới có thể bao gồm background-color.
Tổng kết background trong CSS3
Như vậy, trong bài hướng dẫn này mình đã chỉ bạn thêm một số thay đổi với background trong CSS3. Hi vọng nó giúp ích cho bạn.
Nếu bạn đang tích cực học để làm lập trình Front End thì tham khảo ngay KHÓA HỌC FRONT END (với React.js) để HỌC NHANH + ĐI LÀM SỚM nhé!
