Ảnh, màu nền trong HTML

Theo mặc định, nền trang web của bạn có màu trắng. Bạn có thể không thích nó, nhưng đừng lo lắng. HTML cung cấp cho bạn hai cách sau để trang trí nền trang web của bạn.

  • Nền HTML với màu sắc
  • Nền HTML có hình ảnh

Bây giờ chúng ta hãy xem từng cách tiếp cận một bằng cách sử dụng các ví dụ thích hợp.


Nền html với màu sắc

Thuộc tính bgcolor được sử dụng để kiểm soát nền của một phần tử HTML, cụ thể là phần nội dung trang và nền bảng.

Lưu ý - Thuộc tính bgcolor không được dùng trong HTML5. Không sử dụng thuộc tính này.

Sau đây là cú pháp để sử dụng thuộc tính bgcolor với bất kỳ thẻ HTML nào.

giá_trị_màu này có thể được cung cấp ở bất kỳ định dạng nào sau đây:

Dưới đây là các ví dụ để đặt nền của thẻ HTML

Nền này có màu vàng
Nền này có màu xanh da trời
Nền này có màu xanh lá cây
<!DOCTYPE html>
<html>

   <head>
      <title>Màu nền HTML</title>
   </head>
	
   <body>
      <!-- Định dạng 1 - Sử dụng tên màu -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               Nền này có màu vàng
            </td>
         </tr>
      </table>
 
      <!-- Định dạng 2 - Sử dụng giá trị hex -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               Nền này có màu xanh da trời
            </td>
         </tr>
      </table>
 
      <!-- Định dạng 3 - Sử dụng giá trị màu theo RGB -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               Nền này có màu xanh lá cây
            </td>
         </tr>
      </table>
   </body>
   
</html>

Nền html với hình ảnh

Thuộc tính background cũng có thể được sử dụng để kiểm soát nền của một phần tử HTML, cụ thể là nền của nội dung trang và bảng. Bạn có thể chỉ định một hình ảnh để đặt nền cho trang hoặc bảng HTML của mình.

Lưu ý - Thuộc tính background không được dùng trong HTML5. Không sử dụng thuộc tính này.

Sau đây là cú pháp để sử dụng thuộc tính background với bất kỳ thẻ HTML nào.

Lưu ý - Thuộc tính background không được dùng nữa và bạn nên sử dụng Style Sheet để thiết lập nền.

Các định dạng ảnh được sử dụng thường xuyên nhất là ảnh JPEG, GIFPNG.

Dưới đây là các ví dụ để đặt ảnh nền của bảng.

background này được phủ bởi ảnh HTML.
<!DOCTYPE html>
<html>

   <head>
      <title>Ảnh nền HTML</title>
   </head>
	
   <body>
      <!-- Thiết lập background bảng -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            background này được phủ bởi ảnh HTML.
         </td></tr>
      </table>
   </body>
   
</html>
Nền pattern & trong suốt

Bạn có thể đã thấy nhiều hình nền hoặc hình nền trong suốt trên các trang web khác nhau. Điều này đơn giản có thể đạt được bằng cách sử dụng hình ảnh có hoa văn hoặc hình ảnh trong suốt ở nền.

Chúng tôi khuyên rằng trong khi tạo các mẫu hoặc hình ảnh GIF hoặc PNG trong suốt, hãy sử dụng kích thước nhỏ nhất có thể, thậm chí nhỏ nhất là 1x1 để tránh tải chậm.

Dưới đây là các ví dụ để thiết lập mẫu nền của bảng

background này sẽ được phủ với ảnh viền.
background này sẽ được phủ với ảnh viền.
<!DOCTYPE html>
<html>

   <head>
      <title>Ảnh nền HTML</title>
   </head>
	
   <body>
      <!-- Thiết lập background bảng sử dụng pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               background này sẽ được phủ với ảnh viền.
            </td>
         </tr>
      </table>

      <!-- Ví dụ khác về background bảng sử dụng pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               background này sẽ được phủ với ảnh viền.
            </td>
         </tr>
      </table>
   </body>
   
</html>