Làm thế nào để thiết kế nền trong CSS3 - núm vú

Hầu hết các trang bạn xem có một loại nền. Thủ tục sau đây cho thấy làm thế nào để thêm một nền bằng cách sử dụng CSS3, mà bạn có thể sử dụng để làm cho trang web của bạn trông hấp dẫn hơn cho khách truy cập.

1. Tạo ExternalCSS. HTML và ExternalCSS. CSS và sao chép chúng vào một thư mục mới.

2. Tạo hoặc lấy hình nền trong định dạng Joint Photographic Experts Group (JPEG) và đặt tên nó là nền. JPG.

3. Mở ExternalCSS. CSS.

4. Nhập mã sau đây sau các kiểu hiện tại và lưu các thay đổi vào đĩa.

   body {background-image: url ("Nền. JPG"); kích thước nền: 100%; background-repeat: no-repeat;}
   

   Nơi phổ biến nhất để đặt ảnh nền là trong. Tuy nhiên, không có gì ngăn cản bạn sử dụng nền trong các đối tượng khác và theo nhiều cách khác nhau.

   Điểm khởi đầu cho hầu hết các nền là thuộc tính ảnh nền, nơi bạn có thể chỉ định hình ảnh mà bạn muốn sử dụng với phương thức url (). Có thể thêm nhiều hình ảnh vào nền. Nếu bạn làm như vậy, trình duyệt kết hợp các hình ảnh vào một bài trình bày duy nhất.

   Việc sử dụng thuộc tính có kích thước nền xác định độ lớn hình ảnh xuất hiện trên màn hình. Ví dụ là một bức tranh lớn, vì vậy bạn muốn nó chiếm toàn bộ khu vực trưng bày. Sử dụng 100% vì giá trị có nghĩa là hình ảnh sẽ tự động thay đổi kích cỡ để chiếm toàn bộ khu vực khách hàng.

   Bạn sử dụng thuộc tính background-repeat để xác định xem hình ảnh có lặp lại trong nền hay không. Thông thường các hình ảnh nhỏ sẽ lặp lại để chúng chiếm toàn bộ diện tích hiển thị. Lặp đi lặp lại một hình ảnh lớn có xu hướng làm cho nền trông khó hiểu và làm giảm sự xuất hiện tổng thể của màn hình.

5. Tải lại trang thử nghiệm.

   Bạn thấy hiệu quả của việc thay đổi phong cách.

   

6. Thay đổi kích thước cửa sổ trình duyệt.

   Bạn thấy rằng hình nền tự động thay đổi kích cỡ để chiếm toàn bộ diện tích hiển thị.