Video: Học html css - #4 - Chèn hình ảnh vào website 2025
Tạo nền cho các trang web trong Adobe Dreamweaver CS6 là thú vị và có thể được theo đuổi theo nhiều cách hơn hầu hết mọi người tưởng tượng. Bạn có thể tạo một mẫu lặp lại với một ảnh nhỏ duy nhất, tạo một watermark, hoặc sử dụng một hình ảnh lớn để lấp đầy toàn bộ nền.
Theo mặc định, nền HTML sẽ lặp lại hình ảnh đã chọn cho đến khi nó lấp đầy màn hình. Kết hợp với thuộc tính CSS, bạn có thể kiểm soát hoặc loại bỏ hành vi lặp lại và thậm chí đặt định vị chính xác cho một hình nền duy nhất.
Nếu bạn điền vào một nền với một mẫu, hãy chắc chắn tạo ra một hình mẫu mà không có cạnh rõ ràng.
Để sử dụng theo mặc định, lặp đi lặp lại cho một hình nền, hãy làm theo các bước sau:
-
Trong Photoshop, chọn File → New để tạo một hình ảnh mới.
-
Trong hộp thoại Mới xuất hiện, tạo một hình ảnh rộng hơn nhiều so với chiều cao, chọn RGB, chọn 72 dpi, sau đó bấm OK.
Ví dụ: nhập 1000 vào trường văn bản Độ rộng và 20 trong trường Văn bản độ cao.
-
Chọn màu nền trước và màu nền để tạo hỗn hợp; sau đó sử dụng công cụ Gradient để Shift + kéo từ trên xuống dưới cùng của khu vực hình ảnh để tạo gradient điền.
-
Chọn Tệp → Lưu cho web, lưu hình ảnh dưới dạng tệp JPEG trong thư mục nội dung web của trang web và đóng ảnh.
-
Trong Dreamweaver, chọn Modify → Properties của trang hoặc nhấp vào nút Page Properties trong thanh tra Property để đặt hình ảnh làm hình nền trên trang web của bạn.
Nếu nút Thuộc tính Trang không hiển thị, nhấp vào trang - chắc chắn không chọn một phần tử khác, chẳng hạn như một hình ảnh.
Hộp thoại Page Properties xuất hiện.
-
Trong hộp thoại Các thuộc tính Trang, nhấp vào nút Duyệt qua ở bên phải hình nền. Trong cửa sổ xuất hiện, điều hướng đến vị trí của hình nền đã lưu của bạn, sau đó bấm OK.
-
Quay trở lại hộp thoại Page Properties, nhấn OK.
Hình ảnh xuất hiện dưới nền, lặp đi lặp lại và tạo một gradient nền tuyệt đẹp trên trang!
Tùy thuộc vào kích thước và độ phân giải của màn hình của người dùng, hình nền của bạn có thể bị buộc phải lặp lại. Lặp lại hình nền có thể mang lại một số kết quả sáng tạo.
Trong một số trường hợp, bạn không thể nhìn thấy nền cho đến khi bạn nhấp vào nút Xem trước / Gỡ lỗi trong Trình duyệt và xem trước trang trong trình duyệt mặc định của bạn.
