Làm thế nào để thay đổi hình nền cho HTML5 và CSS3 Lập trình

Bạn có thể sử dụng thẻ img để thêm một hình ảnh vào trang HTML5 của bạn, nhưng đôi khi bạn muốn sử dụng hình ảnh làm nền cho một phần tử cụ thể hoặc cho toàn bộ trang. Bạn có thể sử dụng nguyên tắc CSS hình nền để áp dụng một hình nền cho một trang hoặc các phần tử trên một trang.

Hình nền dễ áp ​​dụng. Mã cho backgroundImage. html cho thấy như thế nào:

backgroundImage. html body {background-image: url ("ropeBG.jpg");} h1 {nền-hình ảnh: url ("ropeBGLight. jpg");} p {background-color: trắng; Màu nền: rgba (255, 255, 255,. 85);}

Sử dụng nền hình ảnh
Tiêu đề sử dụng phiên bản nhẹ hơn của nền và đoạn sử dụng màu nền rắn với độ trong suốt sáng.
Tiêu đề sử dụng phiên bản nhẹ hơn của nền và đoạn sử dụng nền màu rắn với độ trong suốt sáng.

Việc đính kèm hình nền vào một phần tử thông qua CSS không phải là khó. Dưới đây là các bước chung:

1. Tìm hoặc tạo một hình ảnh thích hợp và đặt nó vào cùng một thư mục với trang để dễ tìm.

2. Đính kèm quy tắc kiểu nền sang trang bạn muốn áp dụng hình ảnh.

   Nếu bạn muốn áp dụng hình ảnh vào toàn bộ trang, hãy sử dụng phần tử.

3. Nói cho CSS nơi ảnh nền bằng cách thêm một số nhận dạng url.

   Sử dụng url từ khóa () để cho biết điều tiếp theo là địa chỉ.

4. Nhập địa chỉ của hình ảnh.

   Đơn giản nhất là nếu hình ảnh nằm trong cùng thư mục với trang. Nếu đúng như vậy, bạn chỉ cần gõ tên hình ảnh. Hãy chắc chắn rằng bạn bao quanh URL với dấu ngoặc kép.

5. Kiểm tra hình nền của bạn bằng cách xem trang web trong trình duyệt của bạn.

   Rất nhiều lỗi có thể xảy ra với hình nền. Hình ảnh có thể không nằm trong thư mục đúng, bạn có thể đã viết sai tên của nó, hoặc có thể bạn đã quên mất.

Nhận kiểm tra nền

Thật dễ dàng để thêm hình nền, nhưng hình nền không hoàn hảo. Đây là một trang có nền tảng tốt. Thật không may, văn bản là khó đọc.

Hình nền có thể thêm nhiều zing vào các trang của bạn, nhưng chúng có thể giới thiệu một số vấn đề, chẳng hạn như

• Hình nền có thể thêm vào kích thước tệp. Hình ảnh rất lớn, vì vậy hình nền lớn có thể làm cho trang của bạn lớn hơn và khó tải hơn.

• Một số hình ảnh có thể làm cho trang của bạn khó đọc hơn. Hình ảnh trong nền có thể gây trở ngại cho văn bản, do đó trang có thể khó đọc hơn nhiều.

• Hình ảnh tốt không tạo nên nguồn gốc tốt. Một bức tranh đẹp lôi cuốn con mắt và chú ý đến nó. Công việc của một hình nền là để phai mờ vào nền. Nếu bạn muốn mọi người nhìn vào một bức tranh, nhúng nó. Hình nền không nên nhảy lên mặt trước.

• Nền tảng cần tương phản thấp. Nếu hình nền của bạn tối, bạn có thể hiển thị văn bản nhạt. Nếu hình nền sáng, văn bản tối hiển thị. Nếu hình ảnh của bạn có các vùng sáng và tối (như hầu hết các hình ảnh đẹp), sẽ không thể tìm thấy màu văn bản trông đẹp mắt.