Nhiều background trong CSS3

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.

Cấu trúc:

tag {
        background: nhóm lệnh background 1,nhóm lệnh background 2,...,nhóm lệnh background n;
}

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.

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>Background multi</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Background multi

CSS viết:

div {
        background: url(https://media.hoclaptrinh.vn/images/5c46910983d53.jpg) no-repeat right bottom, url(https://media.hoclaptrinh.vn/images/5c46911b45756.jpg) no-repeat center center, url(https://media.hoclaptrinh.vn/images/5c4691337eeb9.jpg) repeat-x left top;
        height: 250px;
}

Hiển thị trình duyệt khi có CSS:

Background multi

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 mutil:

  Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
background multi 9 12 12 20 5.1 3.2 2.1 7.5

Viết câu trả lời

Drop Images

0 Bình luận