Các hình nền được vẽ trên các lớp ngữ cảnh xếp chồng lên nhau. Lớp đầu tiên được chỉ định được vẽ như thể nó gần người dùng nhất
Các đường viền của phần tử sau đó được vẽ bên trên chúng và background-color được vẽ bên dưới chúng. Cách hình ảnh được vẽ so với hộp và đường viền của nó được xác định bởi thuộc tính CSS background-clip và background-origin
Nếu một hình ảnh được chỉ định không thể vẽ được [ví dụ: khi tệp được biểu thị bằng URI đã chỉ định không thể tải được], các trình duyệt sẽ xử lý nó như một giá trị none
Ghi chú. Ngay cả khi hình ảnh bị mờ và màu sắc sẽ không được hiển thị trong các trường hợp thông thường, nhà phát triển web phải luôn chỉ định một background-color. Nếu không thể tải hình ảnh—ví dụ: khi mạng ngừng hoạt động—màu nền sẽ được sử dụng làm màu dự phòng
Mỗi hình nền được chỉ định dưới dạng từ khóa none hoặc dưới dạng giá trị
background-image =1
#
=
|
none
=
|
=
url[ * ] |
src[ * ]
Để chỉ định nhiều hình nền, hãy cung cấp nhiều giá trị, được phân tách bằng dấu phẩy
background-image: linear-gradient[
to bottom,
rgba[255, 255, 0, 0.5],
rgba[0, 0, 255, 0.5]
], url["catfront.png"];
/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;
none
Là một từ khóa biểu thị sự vắng mặt của hình ảnh
background-image =1
#
=
|
none
=
|
=
url[ * ] |
src[ * ]
Là một
background-image =1 biểu thị hình ảnh sẽ hiển thị. Có thể có một vài trong số chúng, được phân tách bằng dấu phẩy, vì nhiều nền được hỗ trợ
#
=
|
none
=
|
=
url[ * ] |
src[ * ]
Trình duyệt không cung cấp bất kỳ thông tin đặc biệt nào về hình nền cho công nghệ hỗ trợ. Điều này chủ yếu quan trọng đối với trình đọc màn hình, vì trình đọc màn hình sẽ không thông báo về sự hiện diện của nó và do đó không truyền đạt thông tin gì cho người dùng. Nếu hình ảnh chứa thông tin quan trọng để hiểu mục đích tổng thể của trang, thì tốt hơn là mô tả nó theo ngữ nghĩa trong tài liệu
- Hiểu Tiêu chí Thành công 1. 1. 1. W3C Hiểu WCAG 2. 0
Giá trị ban đầu _______ 10 _______ Áp dụng cho tất cả các phần tử. Nó cũng áp dụng cho
background-image =6 và
#
=
|
none
=
|
=
url[ * ] |
src[ * ]
background-image =7. Các giá trị được kế thừa không được chỉ định, nhưng với các giá trị
#
=
|
none
=
|
=
url[ * ] |
src[ * ]
background-image =8 làm cho loại Hoạt hình tuyệt đối trở nên rời rạc
#
=
|
none
=
|
=
url[ * ] |
src[ * ]