Cách Chèn ảnh Vào ảnh Trên Trang Web

Mục lục:

Cách Chèn ảnh Vào ảnh Trên Trang Web
Cách Chèn ảnh Vào ảnh Trên Trang Web

Video: Cách Chèn ảnh Vào ảnh Trên Trang Web

Video: Cách Chèn ảnh Vào ảnh Trên Trang Web
Video: Học html css - #4 - Chèn hình ảnh vào website 2024, Tháng mười một
Anonim

Các khả năng của ngôn ngữ đánh dấu - HTML - và các biểu định kiểu xếp tầng - CSS - cho phép bạn đặt một hình ảnh này vào trong một hình ảnh khác theo nhiều cách. Tất nhiên, điều này đòi hỏi một số kỹ năng về bố cục trang web và bạn cần chọn một phương pháp cụ thể dựa trên mã hiện có. Tuy nhiên, trong một số trường hợp, bạn có thể thực hiện mà không cần chỉnh sửa mã nguồn.

Cách chèn ảnh vào ảnh trên trang web
Cách chèn ảnh vào ảnh trên trang web

Hướng dẫn

Bước 1

Có một cách để đặt một hình ảnh này vào một hình ảnh khác mà không có bất kỳ thay đổi nào trong các trang của trang web. Để làm điều này, chỉ cần chỉnh sửa hình nền được lưu trữ trên máy chủ - sử dụng bất kỳ trình chỉnh sửa đồ họa nào để đặt hình nền trên đó. Nếu phương pháp này phù hợp với bạn, hãy bắt đầu bằng cách xác định vị trí lưu trữ và tên của tệp ảnh nền. Điều này có thể được thực hiện bằng cách tìm nó trong mã nguồn của trang hoặc bằng cách mở nó trong một tab riêng biệt và xem đường dẫn đầy đủ trong thanh địa chỉ của trình duyệt.

Bước 2

Sử dụng trình quản lý tệp của hệ thống quản lý nội dung hoặc ứng dụng khách FTP, tải tệp cần thiết xuống máy tính của bạn và mở tệp đó trong bất kỳ trình chỉnh sửa đồ họa nào - ví dụ: trong ứng dụng Paint được cài đặt bằng Windows.

Bước 3

Đặt hình nền trước trên nền - trong Paint để làm điều này, bạn cần chọn mục "Chèn từ" từ danh sách thả xuống "Chèn" trên tab "Trang chủ" và tìm tệp cần thiết trong hộp thoại mở ra. Sau đó điều chỉnh vị trí của ảnh đã chèn trên nền có sẵn (dùng chuột kéo) và lưu kết quả (Ctrl + S).

Bước 4

Tải lại ảnh đã chỉnh sửa, ghi đè lên ảnh cũ. Điều này hoàn thành thủ tục.

Bước 5

Phương pháp được mô tả không thuận tiện trong trường hợp thỉnh thoảng cần thay đổi hình ảnh đã chèn. Sau đó, sử dụng các khả năng của ngôn ngữ HTML - ví dụ: đặt hình nền làm nền của phần tử trang, trong đó hình nền sẽ được đặt. Một phần tử vùng chứa như vậy có thể là một lớp (div). Để làm cho phần lớn hình ảnh trở thành nền của nó, bạn cần sử dụng mô tả kiểu - thuộc tính kiểu của thẻ div. Một vùng chứa trống trong mã HTML có thể trông giống như sau:

Trong dấu ngoặc đơn, cho biết địa chỉ và tên của tệp hình nền trên trang web của bạn.

Bước 6

Tạo thẻ hình ảnh nền trước (img), sử dụng cùng một thuộc tính kiểu để đặt số lượng phần đệm từ các cạnh của vùng chứa nền. Ví dụ:

Ở đây, thuộc tính chiều rộng và chiều cao đặt kích thước của hình ảnh và bốn số sau phần đệm biểu thị phần đệm tính bằng pixel từ các cạnh của vùng chứa, bắt đầu từ trên cùng (50) và xa hơn theo chiều kim đồng hồ (60 - phải, 70 - dưới cùng, 80 - trái).

Bước 7

Đặt thẻ img vào một vùng chứa:

Bước 8

Thêm các dòng đã tạo vào mã nguồn của trang, sau đó, thay đổi thụt lề, điều chỉnh vị trí của hình ảnh được chèn so với nền của hình nền.

Đề xuất: