HTML - фоны

По умолчанию фон вашей веб-страницы белый. Возможно, вам это не понравится, но не беспокойтесь. HTML предоставляет вам следующие два хороших способа украсить фон вашей веб-страницы.

Фон HTML с цветами
Фон HTML с изображениями

Теперь давайте рассмотрим оба подхода один за другим на соответствующих примерах.

Фон HTML с цветами

В bgcolor Атрибут используется для управления фоном HTML-элемента, в частности, телом страницы и фоном таблицы.

Note- Атрибут bgcolor не рекомендуется в HTML5. Не используйте этот атрибут.

Ниже приведен синтаксис использования атрибута bgcolor с любым тегом HTML.

<tagname bgcolor = "color_value"...>

Это значение color_value может быть указано в любом из следующих форматов -

<!-- 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)" >

пример

Вот примеры для установки фона тега 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>

Это даст следующий результат -

HTML-фон с изображениями

В backgroundАтрибут также может использоваться для управления фоном элемента HTML, в частности, телом страницы и фоном таблицы. Вы можете указать изображение для установки фона вашей HTML-страницы или таблицы.

Note- Атрибут background не рекомендуется в HTML5. Не используйте этот атрибут.

Ниже приведен синтаксис использования атрибута фона с любым тегом HTML.

Note- Атрибут фона устарел, и для настройки фона рекомендуется использовать таблицу стилей.

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

Наиболее часто используемые форматы изображений - это изображения JPEG, GIF и PNG.

пример

Вот примеры для установки фонового изображения стола.

<!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>

Это даст следующий результат -

Узорчатые и прозрачные фоны

Возможно, вы видели много узоров или прозрачных фонов на разных сайтах. Этого просто можно достичь, используя узорчатое изображение или прозрачное изображение в качестве фона.

Рекомендуется при создании узоров или прозрачных изображений в формате GIF или PNG использовать минимально возможные размеры, даже такие маленькие, как 1x1, чтобы избежать медленной загрузки.

пример

Вот примеры для установки фонового рисунка таблицы -

<!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>

Это даст следующий результат -