Bài đăng này sẽ giải thích ngắn gọn phương pháp thêm hình ảnh từ một URL.
Làm cách nào để thêm hình ảnh từ URL trong HTML/CSS?
Trong HTML/CSS, có hai phương pháp để thêm hình ảnh bằng cách sử dụng URL, được liệt kê bên dưới:
- Phương pháp 1: Thêm hình ảnh bằng phần tử
trong HTML
- Phương pháp 2: Thêm hình ảnh bằng thuộc tính CSS trong HTML
Phương pháp 1: Thêm hình ảnh bằng cách sử dụng phần tử ![]()
Các ' ” là một phần tử void duy nhất không có nội dung con và thẻ kết thúc. Các ' src ' và ' mọi điều ” là hai thuộc tính chính được sử dụng bên trong thẻ “
”.
Hãy xem hướng dẫn bên dưới để thêm hình ảnh bằng phần tử !
Bước 1: Tạo div Container
Đầu tiên, tạo một vùng chứa div bằng cách sử dụng “ Tiếp theo, sử dụng thẻ tiêu đề được yêu cầu từ “ ' đến ' ' nhãn. Chẳng hạn, chúng tôi sẽ sử dụng thẻ Sau đó, thêm một “ Theo đầu ra được cung cấp bên dưới, hình ảnh được chỉ định đã được thêm thành công: Các nhà phát triển cũng có thể thêm hình ảnh từ một URL bằng cách sử dụng CSS “ hình nền ”CSS. cho mục đích này, hãy làm theo các bước dưới đây. Đầu tiên, chèn văn bản tiêu đề với sự trợ giúp của thẻ mở và thẻ đóng Tiếp theo, tạo một vùng chứa div bằng cách sử dụng thẻ Bây giờ, hãy truy cập lớp thông qua bộ chọn dấu chấm “ . ” và tên lớp đã được tạo trước đó. Sau đó, áp dụng các thuộc tính CSS được liệt kê bên dưới để thêm hình ảnh từ một URL bên trong lớp: Trong mã được cung cấp ở trên: đầu ra Bạn đã tìm hiểu về các phương pháp khác nhau để thêm hình ảnh từ một URL. Để thêm một hình ảnh từ một URL, các nhà phát triển có thể sử dụng “
Bước 2: Chèn tiêu đề
và thêm văn bản cụ thể làm tiêu đề bên trong thẻ mở và thẻ đóng.
Bước 3: Thêm hình ảnh bằng URL ” và chèn các thuộc tính được liệt kê bên dưới vào bên trong thẻ hình ảnh:
< div tầng lớp = 'img-conatiner' >
< h2 > Thêm hình ảnh với URL < / h2 >
< hình ảnh src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' mọi điều = 'Hình ảnh!' chiều cao = '400px' bề rộng = '300px' / >
< / div >
Phương pháp 2: Thêm hình ảnh bằng thuộc tính CSS trong HTML
Bước 1: Chèn tiêu đề
.
Bước 2: Tạo div Container
< lớp div = 'img-container' > >
Bước 3: Truy cập vùng chứa
Bước 4: Thêm hình ảnh bằng thuộc tính CSS “background-image”
chiều cao : 400px ;
bề rộng : 250px ;
kích thước nền : Lưu trữ ;
Hình nền : url ( https : //hình ảnh .pexels .com/photos/ 2260800 /pexels-ảnh- 2260800 .jpeg? Tự động = nén&cs = tinysrgb&w = 1260 &h = 750 &dpr = một )
}
Phần kết luận
' nhãn. Sau đó, chèn “ src ” thuộc tính và gán URL làm giá trị “src”. Hơn nữa, người dùng có thể thêm một hình ảnh từ URL bằng cách sử dụng CSS “ hình nền ' tài sản. Bài viết này đã nêu các phương pháp thêm hình ảnh từ URL trong HTML/CSS.