CSS3系列教程:背景图片(背景大小和多背景图) 应用说明

下面是针对“CSS3系列教程:背景图片(背景大小和多背景图) 应用说明”的完整攻略。

1. 背景图片的应用说明

在网页开发中，背景图片是很重要的一部分，可以为网页增加美感和视觉效果。CSS3不仅提供了多种背景图片的设置方式，还提供了更多的背景属性可以设置。

1.1 背景图片的设置方式

设置背景图片可以通过以下的CSS属性：

background-image：设置背景图片的路径；
background-repeat：设置背景图片重复的方式；
background-position：设置背景图片的位置；
background-size：设置背景图片的大小。

其中，背景图片的路径可以是相对路径或者绝对路径，如：

body {
  background-image: url(images/background.jpg);
}

设置了以上的CSS属性后，就可以在网页中显示背景图片。

1.2 背景大小的设置

在CSS3中，设置背景图片的大小可以使用background-size属性。它有以下的用法：

可以设置为具体的像素值，如background-size: 800px 600px；
可以设置为百分数值，如background-size: 100% 100%；
可以设置为cover或contain值。

其中，cover值表示背景图片完全覆盖区域，而可能造成图片的部分被裁切；contain值则表示在宽或高上至少有一边完整地覆盖住区域。

示例：

body {
  background-image: url(images/background.jpg);
  background-size: cover;
}

1.3 多背景图的设置

CSS3还提供了多背景图的设置方式，可以为网页设置多个背景图，并且每个背景图的位置和大小可以独立设置。

使用多背景图可以通过以下的CSS属性：

background-image：可以设置多个背景图，用逗号分隔开；
background-position：可以分别设置每个背景图的位置；
background-size：可以分别设置每个背景图的大小；
background-repeat：可以分别设置每个背景图的重复方式。

示例：

body {
  background-image:
    url(images/background.jpg),
    url(images/pattern.png);
  background-position:
    left top,
    right bottom;
  background-size:
    auto,
    200px 200px;
  background-repeat:
    repeat,
    no-repeat;
}

以上代码设置了两个背景图：一个是background.jpg，位置在左上角并且重复；另一个是pattern.png，位置在右下角并且不重复，大小为200px * 200px。

2. 示例说明

下面通过两个示例说明背景图片的应用：

2.1 示例一

在页面中添加一个图片背景，并使背景覆盖整个页面。代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>示例一：图片背景</title>
  <style>
    body {
      background-image: url(images/background.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

其中，background-repeat设置为no-repeat，则图片不会重复；background-size设置为cover，则图片大小为覆盖整个页面。

2.2 示例二

在页面中添加一个多背景图，在不同位置展示不同图片，使页面效果更丰富。代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>示例二：多背景图</title>
  <style>
    body {
      background-image:
        url(images/background.jpg),
        url(images/pattern.png);
      background-position:
        left top,
        right bottom;
      background-size:
        auto,
        200px 200px;
      background-repeat:
        repeat,
        no-repeat;
    }
  </style>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

其中，background-image设置两个背景图：一个是background.jpg，宽高自适应；另一个是pattern.png，大小为200px * 200px；background-position分别设置两个背景图的位置；background-repeat分别设置两个背景图的重复方式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS3系列教程:背景图片(背景大小和多背景图) 应用说明 - Python技术站