CSS-背景 - 芒果文档

📌 相关文章

📜 CSS-背景

📅 最后修改于: 2020-10-26 04:43:10 🧑 作者: Mango

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

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

设置背景色

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


         This text has a yellow background color.

这将产生以下结果-

设置背景图片

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


   
   
   
      Hello World!

它将产生以下结果-

重复背景图片

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

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


   

   
      Tutorials point

它将产生以下结果-

下面的示例演示如何垂直重复背景图像。


   

   
      Tutorials point

它将产生以下结果-

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


   
   
   
      Tutorials point

它将产生以下结果-

设置背景图像位置

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


   

   
      Tutorials point

它将产生以下结果-

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


   

   
      Tutorials point

它将产生以下结果-

设置背景附件

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

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


   

   
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.

它将产生以下结果-

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


   

   
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.
      The background-image is fixed. Try to scroll down the page.

它将产生以下结果-

速记财产

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


   This parapgraph has fixed repeated background image.