Lỗi không thêm được ảnh nền vào html năm 2024

cung cấp văn bản thay thế cho hình ảnh, nếu người dùng không thể xem ảnh (mạng chậm,lỗi đường dẫn ảnh, hoặc nếu người dùng sử dụng trình đọc màn hình).

Giá trị của thuộc tính alt nên mô tả hình ảnh:

Ví dụ

Bản đồ ảnh

Thẻ xác định một bản đồ ảnh. Bản đồ đồ ảnh là một hình ảnh với các khu vực có thể click.

Trong hình dưới cho phép bạn click vào hình máy tính, điện thoại và tách coffee để chuyển tới liên kết tương ứng.

Ví dụ

Thuộc tính name của thẻ liên kết với thẻ sử dụng bản đồ ảnh để tạo nên một mối quan hệ giữa hình ảnh và bản đồ ảnh.

Phần tử bao gồm một số thẻ , chúng xác định khu vực có thể click trên bản đồ ảnh.

Ảnh nền

Để thêm ảnh nền cho một phần tử HTML, ta dùng thuộc tính CSS background-image:

Ví dụ: Để thêm ảnh nền cho một trang web, sử dụng thuộc tính background-image cho phần tử body.

Background Image

Phần tử

HTML5 đã giới thiệu phần tử để tăng tính linh hoạt khi chỉ định tài nguyên ảnh.

Phần tử bao gồm một số phần tử , mỗi phần tử này tham chiếu đến một nguồn ảnh khác nhau. Bằng cách này, trình duyệt có thể chọn hình ảnh phù hợp nhất với chế độ xem và/hoặc thiết bị hiện tại.

Mỗi phần tử có các thuộc tính mô tả hình ảnh của chúng khi nào ảnh đó là thích hợp nhất.

Trình duyệt sẽ sử dụng phần tử đầu tiên khớp với giá trị thuộc tính, và bỏ qua những phần tử theo sau đó.

Ví dụ sau sẽ hiển thị ảnh 1 khi cửa sổ trình duyệt(khung nhìn) tối thiểu 650 pixel, ảnh 2 khi khung nhìn tối thiểu 465 pixel(nhưng < 650 pixel). Nếu khung nhìn nhỏ hơn 465 pixel thì sẽ hiển thị ảnh 3.

Ví dụ

Note: Luôn xác định phần tử là phần tử con cuối cùng của phần tử . Phần tử được sử dụng bởi trình duyệt không hỗ trợ phần tử , hoặc không có thẻ nào phù hợp.

Trình đọc màn hình HTML

Trình đọc màn hình là một chương trình phần mềm đọc mã HTML, chuyển đổi văn bản, và cho phép người dùng “nghe” được nội dung. Trình đọc màn hình rất hữu ích cho những người khiếm thị hoặc khuyết tật học tập.

Tổng kết chương

• Dùng phần tử để xác định một hình ảnh
• Dùng thuộc tính src để xác định URL (đường dẫn) cho ảnh
• Dừng thuộc tính alt để xác định văn bản thay thế cho hình ảnh, nếu ảnh không thể hiển thị
• Dùng thuộc tính width và height để xác định kích thước của ảnh
• Dùng thuộc tính width và height của CSS để xác định kích thước của ảnh (cách khác)
• Dùng thuộc tính float để di chuyển ảnh
• Dùng phần tử để xác định bản đồ ảnh
• Dùng phần tử để xác định vùng có thể click trên bản đồ ảnh
• Dùng thuộc tính usemap của phần tử để liên kết tới một bản đồ ảnh
• Dùng phần tử để hiển thị các hình ảnh khác nhau cho các thiết bị tương ứng.

Note: Tải ảnh sẽ mất thời gian. Những ảnh lớn có thể khiến trang web của bạn bị chậm. Hãy sử dụng hình ảnh một cách cẩn thận