Làm thế nào để thay đổi nền lặp đi lặp lại trên các trang web CSS3 - núm vú

Có những tình huống mà bạn chỉ muốn có một bản sao của một hình nền trên trang web CSS3 của bạn. Nó có thể là hình ảnh bạn sử dụng là cái gì đó không lặp lại hay là đủ lớn mà bạn thực sự không muốn nó lặp lại. Thủ tục dưới đây thể hiện kỹ thuật bạn có thể sử dụng để trình duyệt chỉ sử dụng một bản sao của hình nền.

1. Mở BackgroundPosition. Tệp CSS.

2. Chỉnh sửa kiểu cơ thể để hình ảnh không lặp lại, như được hiển thị ở đây.

   body {background-image: url ("CuteCat. Jpg"); màu nền: SaddleBrown; màu sắc: SeaGreen; font-size: x-lớn; text-shadow: 1px 1px Màu vàng; vị trí nền: trung tâm; background-attachment: cố định; lặp lại: không lặp lại; background-size: 80%;}
   

   Tài sản lặp lại được thiết lập để không lặp lại để trình duyệt biết để chỉ hiển thị một bản sao. Bởi vì chỉ có một bản sao và hình ảnh có thể không phải là kích thước phù hợp để cung cấp một bản trình bày tốt khi người dùng thay đổi kích thước trình duyệt, bạn cũng nên đặt thuộc tính kích thước nền để thay đổi kích thước hình ảnh tự động.

3. Lưu tệp CSS dưới dạng NoRepeat. CSS.

4. Mở BackgroundPosition. Tệp HTML.

5. Sửa đổi thẻ để trông như thế này:

6. Lưu tệp HTML dưới dạng NoRepeat. HTML.

7. Nạp trang NoRepeat.

   Bạn nhìn thấy nền. Hiện tại chỉ có một hình ảnh ở giữa - và khi bạn thay đổi kích thước trình duyệt, hình ảnh sẽ tự động thay đổi kích thước.