Làm thế nào để tạo một hình nền đơn CSS3 - núm vú

Cách đơn giản nhất và tương thích nhất để tạo ra một nền CSS3 có ít nhất một chút pizzazz là sử dụng một hình ảnh duy nhất. Hình ảnh bên phải nói rất nhiều về trang web của bạn và cung cấp liên tục giữa các trang. Bởi vì cách tiếp cận này là tiêu chuẩn, bạn thấy nó được sử dụng trên rất nhiều trang web. Tất cả những gì bạn thực sự cần biết để sử dụng nó là thuộc tính background-image, như thể hiện trong thủ tục sau.

1. Tạo tệp HTML5 mới với trình chỉnh sửa văn bản của bạn.

2. Nhập mã sau cho trang HTML.

   Một hình nền đơn
   
   Mèo Dễ thương
   Một trang có mèo dễ thương làm nền.
   

3. Lưu tệp dưới dạng SingleImage. HTML.

   Mẫu sẽ xuất hiện ở các vị trí khác, vì vậy việc đặt tên là quan trọng.

4. Tạo tệp tin CSS mới với trình soạn thảo văn bản của bạn.

5. Gõ thông tin kiểu CSS sau đâ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;}
   

   Đây là hình thức đơn giản nhất của một hình nền duy nhất. Thuộc tính hình ảnh nền có một chức năng url () đơn kết hợp với nó. Chỉ trong trường hợp người dùng không thể hiển thị hình ảnh (hoặc không chọn), bạn cần phải đặt màu nền phù hợp.

   Tùy thuộc vào hình ảnh (ví dụ sử dụng một trong những đặc biệt khó làm việc khi nói đến văn bản), bạn có thể cần phải đặt màu văn bản và kích thước để làm cho nội dung dễ đọc.

   Đây là một nơi sử dụng thuộc tính text-shadow có thể tạo sự khác biệt giữa niềm vui của người dùng và khiếu nại của người dùng. Sử dụng màu tương phản cho phông chữ và bóng tối để cả hai làm việc cùng nhau để làm cho nội dung có thể xem được đối với hình ảnh với nhiều màu sắc.

6. Lưu tệp dưới dạng SingleImage. CSS.

   Mẫu sẽ xuất hiện ở các vị trí khác, vì vậy việc đặt tên là quan trọng.

7. Tải trang SingleImage.

   Bạn nhìn thấy nền. Lưu ý rằng đồ họa bắt đầu ở góc trên bên trái và tự động lặp lại nếu cần để lấp đầy toàn bộ cửa sổ.