Cách đặt Nền Trên Trang Của Bạn

Mục lục:

Cách đặt Nền Trên Trang Của Bạn
Cách đặt Nền Trên Trang Của Bạn

Video: Cách đặt Nền Trên Trang Của Bạn

Video: Cách đặt Nền Trên Trang Của Bạn
Video: Cách thay đổi cài đặt hình nền máy tính Desktop, Laptop trên Windows 10 2024, Tháng mười một
Anonim

Đưa hình nền lên trang web là một công việc kéo dài 5 phút. Nhiều thời gian hơn được dành cho việc chuẩn bị hình ảnh - lựa chọn, điều chỉnh, thêm hiệu ứng, soạn một số hình minh họa vào một tệp đồ họa.

Cách đặt nền trên trang của bạn
Cách đặt nền trên trang của bạn

Hướng dẫn

Bước 1

Thuộc tính background chịu trách nhiệm quản lý background. Để tô đều trang bằng một màu, hãy sử dụng thẻ kiểu trong nội dung:. Nền sẽ là màu đen. Nếu sử dụng CSS, hãy nhập vào head: body {background-color: # 000000;}

Bước 2

Với sự trợ giúp của một liên kết, một hình ảnh lặp lại được thiết lập. Địa chỉ được chỉ định là một liên kết bên ngoài hoặc bên trong. Khi sử dụng phương pháp này, điều quan trọng là các đường nối giữa các hình ảnh phải không nhìn thấy được, nếu không trang sẽ trông luộm thuộm. Trong CSS, hãy sử dụng: body {background-color: # 000000; background-image: url (images / pattern.png);}.

Bước 3

Sự lặp lại của mẫu có thể được kiểm soát. Lặp lại nền chịu trách nhiệm cho chức năng này cùng với các yếu tố sau: - lặp lại-x - lặp lại theo chiều ngang; - lặp lại-y - lặp lại theo chiều dọc: - lặp lại - lặp lại theo cả hai hướng; - không lặp lại - không lặp lại. Nó được thiết lập như this: body {background-color: # 000000; background-image: url ("butter.gif"); background-repeat: không lặp lại; }

Bước 4

Vị trí nền giúp định vị hình ảnh trong phần mong muốn của trang web. Tọa độ có thể được đặt bằng cách sử dụng tỷ lệ phần trăm (50% 75%), cm (5cm 5cm), khía cạnh pixel (200px 400px), dạng từ (trái, phải, trên, giữa, dưới). Ví dụ: body {background-color: # 000000; background-image: url ("butter.gif"); background-repeat: không lặp lại; background-attachment: cố định; background-position: phía dưới bên trái; } Giá trị 0% 0% bằng trên cùng bên trái.

Bước 5

Thuộc tính background-attachment chỉ định xem hình ảnh có được cuộn cùng với trang (background-attachment: scroll) hay không (background-attachment: fixed).

Đề xuất: