CSS3 cung cấp các thuộc tính mới cho phép thêm nhiều ảnh nền đến một phần tử. Một số thuộc tính: background-image, background-size, background-origin, background-clip. Trình duyệt hỗ trợ:
| Chrome | IE/Edge | Firefox | Safari | Opera | |
| background-image (multiple backgrounds) | 4.0 +
|
9.0 + | 3.6 + | 3.1 + | 11.5 + |
| background-size | 4.0 +
1.0 -webkit- |
9.0 + | 4.0 +
3.6 -moz- |
4.1 +
3.0 -webkit – |
10.5 +
10.0 -o- |
| background-origin | 1.0 + | 9.0 + | 4.0 + | 3.0 | 10.5 + |
| background-clip | 4.0 + | 9.0 + | 4.0 + | 3.0 | 10.5 + |
Đối với thuộc tính background-size kể từ các phiên bản Chrome 1.0, Firefox 3.6, Safari 3.0, và Opear 10.0, có sử dụng thêm tiền tố (prefix) -webkit-, -moz-, và -o-.
background-image
Với CSS3, thuộc tính background-image cho phép thêm nhiều ảnh đến nền của một phần tử. Ví dụ sau thêm hai ảnh, ảnh img_flwr.gif được gán đến góc phải dưới (bottom right) và ảnh paper.gif được gán đến góc trái trên (top left):
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
Kết quả:
bacground-size
Trước CSS3, kích cỡ ảnh nền là ảnh thực của ảnh. CSS3 cung cấp thuộc tính background-size cho phép xác định kích cỡ ảnh tuỳ ý.
Thuộc tính background-size có hai giá trị là contain – thay đổi kích cỡ sao cho khớp với vùng nội dung và cover – kích cỡ ảnh bằng hay lớn hơn vùng nội dung.
Ví dụ:
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Kết quả
Ảnh ban đầu
Dùng contain
Dùng cover
background-origin
CSS3 cung cấp thuộc tính background-origin cho phép định vị ảnh nền của một phần tử. Các giá trị của background-origin:
- border-box: ảnh nền bắt đầu từ góc trái trên của khung viền (border)
- padding-box: ảnh nền bắt đầu từ góc trái trên của cạnh padding
- content-box: ảnh nền bắt đầu từ góc trái trên của nội dung
Ví dụ:
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
}
#example2 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: border-box;
}
#example3 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Kết quả
Không dùng background-origin
Dùng border-box
Dùng content-box
background-clip
CSS3 cung cấp thuộc tính background-clip cho phép xác định vùng vẽ của nền
Các giá trị của background-origin:
- border-box: nền được vẽ đến bên ngoài cạnh khung viền
- padding-box: nền được vẽ đến bên ngoài cạnh padding
- content-box: nền được vẽ với vùng nội dung
Ví dụ:
#example1 {
border: 10px dotted black;
padding:35px;
background: yellow;
}
#example2 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}
Kết quả
Không dùng background-clip
Dùng padding-box
Dùng content-box
(Tham khảo thêm tại https://www.w3schools.com/css/css3_backgrounds.asp )
Trần Ngọc Minh 