Làm cách nào để tô màu một hình ảnh trong css?

cú pháp

 = 
  image( ? [ ? , ? ]! )  

 = 
  ltr  |
  rtl  

 = 
       |
    

 = 
  url(  * )  |
  src(  * )  

ở đâu

background-image: image("myimage.webp#xywh=0,20,40,60");

Hướng của hình ảnh, hoặc là

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Không hoặc nhiều hơn

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Màu, chỉ định màu nền đồng nhất để sử dụng làm màu dự phòng nếu không tìm thấy, hỗ trợ hoặc khai báo

background-image: image("myimage.webp#xywh=0,20,40,60");

Nhận thức hai chiều

Tham số tùy chọn đầu tiên của ký hiệu

background-image: image("myimage.webp#xywh=0,20,40,60");

Các mảnh hình ảnh

Một điểm khác biệt chính giữa

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Hình nền của phần tử sẽ là một phần của hình ảnh myImage. webp bắt đầu ở tọa độ 0px, 20px (góc trên cùng bên trái) và rộng 40px và cao 60px

Cú pháp phân đoạn phương tiện

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Các mảnh hình ảnh cũng có thể được sử dụng trong ký hiệu

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Các trình duyệt hiểu

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Dự phòng màu

Nếu một màu được chỉ định trong

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Bỏ qua các nguồn hình ảnh trong khi bao gồm một màu là hợp lệ và tạo ra một mẫu màu. Không giống như khai báo một

background-image: image("myimage.webp#xywh=0,20,40,60");

Kích thước của mẫu màu có thể được đặt bằng thuộc tính

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Mối quan tâm về khả năng tiếp cận

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

• MDN Hiểu về WCAG, Hướng dẫn 1. 1 giải thích
• Hiểu Tiêu chí Thành công 1. 1. 1. W3C Hiểu WCAG 2. 0

Tính năng này có thể giúp cải thiện khả năng truy cập bằng cách cung cấp màu dự phòng khi hình ảnh không tải được. Mặc dù điều này có thể và nên được thực hiện bằng cách bao gồm màu nền trên mọi hình nền, nhưng chức năng CSS

background-image: image("myimage.webp#xywh=0,20,40,60");

ví dụ

Hình ảnh định hướng nhạy cảm

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Trong các mục danh sách từ trái sang phải — những mục có

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Hiển thị một phần của hình nền

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Khi người dùng di chuột qua hộp, con trỏ sẽ thay đổi để hiển thị phần 16x16 px của hình ảnh sprite, bắt đầu từ x=32 và y=64

Đặt màu lên trên hình nền

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Ở trên sẽ đặt một mặt nạ đen bán trong suốt trên hình nền logo Firefox. Thay vào đó, nếu chúng tôi sử dụng thuộc tính

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

background-image: image("myimage.webp#xywh=0,20,40,60");

Làm cách nào để thay đổi màu biểu tượng hình ảnh trong CSS?

Làm cách nào để thay đổi màu nền của hình ảnh trong CSS?

Làm cách nào để thay đổi màu ảnh?

Làm cách nào để tô màu hình ảnh SVG trong CSS?