CSS - Backgrounds - 極客書

本章教您如何設置各種HTML元素的背景。可以設置元素的以下背景屬性−

background color屬性用於設置元素的背景色。
background image屬性用於設置元素的背景圖像。
background repeat屬性用於控制圖像在背景中的重複。
背景位置屬性用於控制圖像在背景中的位置。
background attachment屬性用於控制圖像在背景中的滾動。
background屬性用作指定許多其他背景屬性的速記。

Set the Background Color

下面的示例演示如何設置元素的背景色。

<html>
   <head>
   </head>

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

這將產生以下結果&負;

Set the Background Image

我們可以通過調用本地存儲的圖像來設置背景圖像，如下所示−

Live Demo

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

它將產生以下結果&負;

Repeat the Background Image

下面的示例演示如何在圖像較小時重複背景圖像。如果不想重複圖像，可以使用不重複值作爲背景重複屬性，在這種情況下，圖像只顯示一次。

默認情況下，background repeat屬性將具有repeat值。

Live Demo

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

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

它將產生以下結果&負;

下面的示例演示如何垂直重複背景圖像。

Live Demo

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

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

它將產生以下結果&負;

下面的示例演示如何水平重複背景圖像。

Live Demo

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

它將產生以下結果&負;

Set the Background Image Position

下面的示例演示如何將背景圖像位置設置爲距左側100像素。

Live Demo

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

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

它將產生以下結果&負;

下面的示例演示如何將背景圖像位置設置爲距左側100像素，距頂部200像素。

Live Demo

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

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

它將產生以下結果&負;

Set the Background Attachment

背景附件確定背景圖像是固定的還是與頁面的其餘部分一起滾動。

下面的示例演示如何設置固定的背景圖像。

Live Demo

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

它將產生以下結果&負;

下面的示例演示如何設置滾動背景圖像。

Live Demo

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

它將產生以下結果&負;

Shorthand Property

您可以使用background屬性一次設置所有背景屬性。例如−