CSS - 背景

本章教您如何设置各种 HTML 元素的背景。您可以设置元素的以下背景属性 -

背景颜色属性用于设置元素的背景颜色。
background-image属性用于设置元素的背景图像。
background -repeat属性用于控制背景中图像的重复。
背景位置属性用于控制图像在背景中的位置。
background -attachment属性用于控制背景中图像的滚动。
背景属性用作指定许多其他背景属性的简写。

设置背景颜色

以下示例演示了如何设置元素的背景颜色。

<html>
   <head>
   </head>

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

这将产生以下结果 -

设置背景图片

我们可以通过调用本地存储的图像来设置背景图像，如下所示 -

现场演示

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

它将产生以下结果 -

重复背景图像

以下示例演示了如果图像较小，如何重复背景图像。如果您不想重复图像，则可以对background-repeat属性使用no-repeat值，在这种情况下图像将仅显示一次。

默认情况下，background-repeat属性将具有重复值。

现场演示

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

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

它将产生以下结果 -

以下示例演示了如何垂直重复背景图像。

现场演示

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

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

它将产生以下结果 -

以下示例演示如何水平重复背景图像。

现场演示

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

它将产生以下结果 -

设置背景图像位置

下面的示例演示如何将背景图像位置设置为距左侧 100 像素。

现场演示

<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 像素。

现场演示

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

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

它将产生以下结果 -

设置背景附件

背景附件确定背景图像是固定的还是与页面的其余部分一起滚动。

下面的例子演示了如何设置固定背景图片。

现场演示

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

它将产生以下结果 -

下面的例子演示了如何设置滚动背景图片。

现场演示

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

它将产生以下结果 -

速记属性

您可以使用背景属性一次设置所有背景属性。例如 -

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