CSS - tła

W tym rozdziale dowiesz się, jak ustawić tła różnych elementów HTML. Możesz ustawić następujące właściwości tła elementu -

Plik background-color właściwość służy do ustawiania koloru tła elementu.
Plik background-image Właściwość służy do ustawiania obrazu tła elementu.
Plik background-repeat Właściwość służy do kontrolowania powtarzania się obrazu w tle.
Plik background-position właściwość służy do kontrolowania położenia obrazu w tle.
Plik background-attachment właściwość służy do kontrolowania przewijania obrazu w tle.
Plik background właściwość jest używana jako skrót do określenia wielu innych właściwości tła.

Ustaw kolor tła

Poniżej znajduje się przykład, który pokazuje, jak ustawić kolor tła dla elementu.

<html>
   <head>
   </head>

   <body>
      <p style = "background-color:yellow;">
         This text has a yellow background color.
      </p>
   </body>
</html>

To da następujący wynik -

Ustaw obraz tła

Możemy ustawić obraz tła, wywołując lokalne przechowywane obrazy, jak pokazano poniżej -

<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Hello World!</h1>
   </body>
<html>

To da następujący wynik -

Powtórz obraz tła

Poniższy przykład pokazuje, jak powtórzyć obraz tła, jeśli obraz jest mały. Możesz użyć wartości bez powtarzania dla właściwości powtarzania tła, jeśli nie chcesz powtarzać obrazu, w tym przypadku obraz zostanie wyświetlony tylko raz.

Domyślnie właściwość powtarzania tła będzie miała wartość powtarzania .

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

To da następujący wynik -

Poniższy przykład ilustruje sposób powtarzania obrazu tła w pionie.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

To da następujący wynik -

Poniższy przykład ilustruje, jak powtórzyć obraz tła w poziomie.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

To da następujący wynik -

Ustaw położenie obrazu tła

Poniższy przykład ilustruje, jak ustawić położenie obrazu tła 100 pikseli od lewej strony.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

To da następujący wynik -

Poniższy przykład pokazuje, jak ustawić położenie obrazu tła o 100 pikseli od lewej strony i 200 pikseli od góry.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

To da następujący wynik -

Ustaw załącznik w tle

Załącznik w tle określa, czy obraz tła jest stały, czy przewija się wraz z resztą strony.

Poniższy przykład ilustruje sposób ustawiania stałego obrazu tła.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

To da następujący wynik -

Poniższy przykład ilustruje sposób ustawiania przewijanego obrazu tła.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

To da następujący wynik -

Skrótowa własność

Możesz użyć właściwości background, aby ustawić wszystkie właściwości tła jednocześnie. Na przykład -

<p style = "background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>