HTML - Nền

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

Các bgcolor thuộc tính đượ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.

Note- 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.

<tagname bgcolor = "color_value"...>

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

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

Thí dụ

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

Điều này sẽ tạo ra kết quả sau:

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

Các backgroundthuộc tính 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.

Note- Thuộc tính nền 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.

Note- 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.

<tagname background = "Image URL"...>

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

Thí dụ

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

Điều này sẽ tạo ra kết quả sau:

Nền có hoa văn & 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.

Thí dụ

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

Điều này sẽ tạo ra kết quả sau: