CSS background 背景属性-之路教程

语法

background: bg-color  bg-image bg-position  bg-size  bg-repeat bg-oroirn  bg-clip bg-attachment | initial | inherit;

背景属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Background 属性示例</h2>
    <p>Here the background color is set to green.</p>
  </body>
</html>

结果

应用了图像的背景属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
    <h2>Background 属性示例</h2>
    <p>Here a background image is used.</p>
  </body>
</html>

请参阅背景属性的另一个示例，其中应用了 background-color、background-image、background-repeat 和 background-attachment 值。

具有不同值的背景属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #ccc url("/build/images/onitroad-logo-black.png") no-repeat fixed center;
      }
    </style>
  </head>
  <body>
    <h2>Background 属性示例</h2>
    <p>In this example background property specifies the background-color, the background-image property to set the image to the background, background-repeat to specify the image to be non repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in center.</p>
  </body>
</html>

在以下示例中，background-size 属性用于指定背景的大小。

background-size 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>Background 属性示例</h2>
    <p>Here the size for the background is set to cover.</p>
  </body>
</html>

其中 background-clip 属性指定背景在元素内应该延伸多远。

background-clip 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 8px dotted #ccc;
        padding: 25px;
        background: #ccc;
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background 属性示例</h2>
    <div>
      <p>The background-clip for this div element is set to padding-box.</p>
    </div>
  </body>
</html>

在下一个示例中，使用了 background-oroirn 属性。
它让背景图像从内容的左上角开始。

background-oroirn 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 10px double #ccc;
        padding: 25px;
        background: url("/build/images/onitroad-logo-black.png");
        background-repeat: no-repeat;
        background-oroirn: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background 属性示例</h2>
    <p>Here background-oroirn: padding-box (default) is set.</p>
    <div></div>
  </body>
</html>

CSS background 属性值说明

值	描述
background-color	设置背景颜色。
background-image	设置一个或者多个图像。
background-position	指定背景图像的位置。
background-size	设置背景图像的大小。
background-repeat	指定如何重复背景图像。
background-oroirn	指定背景图像的定位区域。
background-clip	指定背景图像的绘画区域。
background-attachment	指定图像是否固定。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

CSS background 背景属性

CSS background背景是用于设置所有背景样式属性的简写。
背景属性包括以下属性：

background-color，用于设置背景颜色。
background-image，用于为一个元素设置一张或者多张背景图片。
background-repeat，用于控制元素的重复位置。
background-position，用于设置背景图片位置。
background-oroirn，用于定义背景定位区域，即使用background-image属性放置的图像的位置。
background-clip，用于将背景图像或者颜色放置在其边框下方。
background-attachment，用于定义背景图像是固定的还是与页面的其余部分一起滚动。
background-size，用于定义背景图片的大小。

如果背景速记属性中的属性之一是背景大小，则应使用斜线将其与背景位置分开。

当使用多个背景图像源但还需要背景颜色时，它应该在列表的最后。

初始值	请参阅单个属性。
应用于	所有元素。它还适用于::first-letter伪元素。
继承	无效
可动画的	是的。背景颜色，背景位置和背景大小是有动画的。
版本	CSS1 + CSS3中的新属性
DOM 语法	object.style.background = "blue url(img.jpeg) bottom left repeat";

日期：2020-06-02 22:14:24 来源：oir作者：oir

←CSS background-blend-mode 属性

CSS border-image 属性→

语法