HTML及CSS学习笔记 13 - 背景

最新推荐文章于 2023-12-15 16:23:47 发布

chodenke

最新推荐文章于 2023-12-15 16:23:47 发布

阅读量435

点赞数 2

分类专栏： HTML及CSS学习笔记文章标签： CSS web中的图片背景背景图片

本文链接：https://blog.csdn.net/cgl125167016/article/details/90321271

版权

HTML及CSS学习笔记专栏收录该内容

16 篇文章 5 订阅

订阅专栏

本文是HTML及CSS课程的第十三课。主要介绍和页面背景相关的CSS样式属性，如背景颜色、背景图片、背景图片平铺方式等等

一、web中的图片

1、web中常见的图片格式

web中我们常见的图片格式有JPEG（Joint Photographic Experts Group）、PNG（Portable Network Graphics）和GIF（Graphics Interchange Format）。

1.1、JPEG

JPEG格式的图片文件扩展名为.jpg或.jpeg。
JPEG格式的图片可以展示一张照片或非常复杂图像。
JPEG格式可以表示256 x 256 x 256 = 16777216 种颜色，即所有的RGB颜色。
JPEG格式的图片不支持图像透明。
JPEG格式的图片不支持动画。

1.2、PNG

PNG格式的图片文件扩展名为.png。
PNG格式的图片适合展示网页插画，logo及网页中的小图标（icon）。
PNG格式可以表示上百万种不同颜色。
PNG格式有8位、24位、32位三种形式，24位PNG不支持图像透明，8位PNG和32位PNG支持图像透明。
PNG格式的图片不支持动画。

1.3、GIF

GIF格式的图片文件扩展名为.gif。
GIF格式是网络中运用最早的图片格式，适合网页插画，logo及网页中的小图标（icon）。
GIF格式最多只能表示256种颜色。
GIF格式支持图像透明。
GIF格式支持动画。

综上，结合这几种图片格式各自的特点，我们在web中使用图片时，一般复杂颜色的图像和照片使用JPEG格式，动态图像使用GIF格式，而透明图片一般使用png格式（png格式较GIF格式更平滑）。

2、web中常见的图片类型

web中的图片按作用分类大致可以划分为内容图片、交互图片、布局图片。

2.1、内容图片

内容图片是页面中真正需要的内容，没有内容图片就无法完整的理解页面的内容信息。如：

在web中添加内容图片时通常在HTML文档中使用<img />标签。

2.2、交互图片

交互图片承载页面中一定的交互功能，会给用户浏览页面带来一定的帮助。如：

交互图片一般是一些小图标（icon），常常使用PNG格式或GIF格式。添加交互图片时，有时会在HTML文档中使用<img />标签，有时会在CSS文档中使用背景系列的样式属性和图片精灵，而随着HTML5和CSS3的流行，现在越来越多的网页开始使用字体图标来实现。

2.3、布局图片

布局图片一般出现在页面的背景中，对于了解页面的具体内容信息，它们并不是必须的。如：

布局图片一般需要使用CSS中背景系列的样式属性来添加，这也是为了符合内容与表现分离的规范。

二、背景

在CSS中，可以通过一些列的样式属性为元素设置背景颜色、背景图片等。

1、背景颜色

在CSS中使用background-color属性来定义元素的背景颜色，前面的章节中我们已经看到很多应用这一属性的例子，这里不再赘述。

2、背景图片路径

在CSS中使用background-image属性为元素添加背景图片。
下面是一个示例：
需要使用的背景图片（尺寸 150像素 x 150像素）：
要添加的图片
HTML源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 背景图片路径 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d-background {
        height: 300px;
        background-color: #8a4438;
        background-image: url("images/brick.png");
      }
    </style>
  </head>
  <body>
    <div class="d-background"></div>
  </body>
</html>

页面浏览效果：
背景图片路径
说明：

样式属性background-image的值要指定一个图片路径，图片路径写在url("")中，""可以省略，可以使用相对路径或绝对路径。
一般在设置背景图片前，会先给元素一个和背景图片底色相近的背景颜色，在背景图片由于网络等原因无法加载时，至少页面不会太单调。

3、背景图片平铺

在CSS中使用background-repeat属性控制元素背景图片的平铺方式。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 背景图片平铺 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d-background {
        height: 300px;
        background-color: #8a4438;
        background-image: url("images/brick.png");
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="d-background"></div>
  </body>
</html>

页面浏览效果：
背景图片平铺
说明：

样式属性background-repeat常用值及说明如下;

样式属性及值	说明
`background-repeat: no-repeat;`	背景图片不平铺，图片显示在元素的左上角
`background-repeat: repeat-x;`	背景图片沿着x轴平铺
`background-repeat: repeat-y;`	背景图片沿着y轴平铺
`background-repeat: repeat;`	背景图片沿着x轴和y轴平铺，`repeat`为`background-repeat`属性的默认值

4、背景图片位置

在CSS中样式属性background-position可以控制背景图片在元素中显示的位置。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 背景图片位置 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d-background {
        height: 300px;
        background-color: #8a4438;
        background-image: url("images/brick.png");
        background-repeat: no-repeat;
        background-position: bottom center;
      }
    </style>
  </head>
  <body>
    <div class="d-background"></div>
  </body>
</html>

页面浏览效果：
背景图片位置
说明：

样式属性background-position可以设置两个值。第一个值表示背景图片在容器元素中纵向的位置，可能的值为top（默认）、center、bottom或者数值；第二个值表示背景图片在容器元素中横向的位置，可能的值为left（默认）、center、right或者数值。

5、图片精灵

web中的一些小图标（icon），常常使用PNG或GIF格式，很多情况下，我们仍然使用CSS中的背景系列样式属性，以背景的形式展示这些图片。为了减少网络请求次数，常常会将这些小图片都放在一张较大的图片中。通常我们将这种图片称之为图片精灵。
下面是一个示例：
需要使用的图片精灵（尺寸 28像素 x 56像素）：

HTML源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 图片精灵 </title>
    <style type="text/css">
      * {
        margin: 0;
        border: 0;
        padding: 0;
      }
      a {
        text-decoration: none;
      }
      .login-bar {
        position: absolute;
        top: 20px;
        right: 50px;
        background-color: lightskyblue;
      }
      .login-bar a {
        color: #FFFFFF;
        font: 16px/28px 微软雅黑, sans-serif;
        background-image: url("images/icons.png");
      }
      .login-bar a:hover {
        color: #EFEFEF;
      }
      .qq-login, .wb-login {
        display: block;
        float: left;
        width: 82px;
        height: 28px;
        padding-left: 28px;
      }
      .qq-login {
        background-position: 0 0;
      }
      .wb-login {
        background-position: 0 -28px;
      }
    </style>
  </head>
  <body>
    <div class="login-bar">
      <a href="#" class="qq-login">qq登陆</a>
      <a href="#" class="wb-login">微博登陆</a>
    </div>
  </body>
</html>

页面浏览效果：
图片精灵
说明：

图片精灵配合background-position属性，可以使其中的不同小图标显示在网页中不同的位置。以元素的左上角为坐标(0, 0)点，向右为横轴正方向，向下为纵轴正方向，建立坐标系，background-position属性配置的两个值即为图片精灵的左上角在该坐标系中的x轴坐标值和y轴坐标值。本例中图标位置截取的示意如下：

6、多张背景图片

在CSS中，我们可以为一个元素设置多张背景图片。
下面是一个示例：
需要使用的第一张背景图片（尺寸 150像素 x 150像素）：
bg1
需要使用的第二张背景图片（尺寸 150像素 x 150像素）：
bg2
HTML源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 多张背景图片 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d-background {
        width: 200px;
        height: 200px;
        background-image: url("images/bg1.png"), url("images/bg2.png");
        background-repeat: no-repeat;
        background-position: top left, bottom right;
      }
    </style>
  </head>
  <body>
    <div class="d-background"></div>
  </body>
</html>

页面浏览效果：
多张背景图片
说明

在CSS背景属性中，使用,分隔，可以定义多张背景图片及背景图的相关属性。
先定义的背景图片会覆盖后定义的背景图片。

7、背景图片尺寸

在CSS中样式属性background-size可以设置背景图片的尺寸。
下面是一个示例：
需要使用的背景图片（尺寸 250像素 x 250像素）：

HTML源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 背景图片尺寸 </title>
    <style type="text/css">
      * {margin: 10px; border: 0; padding: 0;}
      .d-background {
        width: 300px;
        height: 250px;
        float: left;
        background-color: lightgray;
        background-image: url("images/bg.png");
        background-repeat: no-repeat;
      }
      .d2 {background-size: 300px 250px;}
      .d3 {background-size: 300px;}
      .d4 {background-size: 50% 50%;}
      .d5 {background-size: cover;}
      .d6 {background-size: contain;}
    </style>
  </head>
  <body>
    <div class="d-background"></div>
    <div class="d-background d2"></div>
    <div class="d-background d3"></div>
    <div class="d-background d4"></div>
    <div class="d-background d5"></div>
    <div class="d-background d6"></div>
  </body>
</html>

页面浏览效果：
背景图片尺寸
说明：

样式属性background-size在定义背景图片尺寸时，属性值可以使用长度数值，百分比或关键字（cover和contain）。
使用长度数值设置背景图片的宽度和高度时，第一个值为宽度，第二个值为高度。如果只给出第一个值，第二个值即为auto，图片会等比例缩放。
使用百分比设置背景图片的宽度和高度时，表示相对于所在区域的百分比。第一个值设置宽度，第二个值设置高度。如果只给出第一个值，第二个值即为auto，图片会等比例缩放。
使用关键字cover，表示保持图像的长宽比例，并将图像缩放成刚好完全覆盖所在区域的最小尺寸。
使用关键字contain，表示保持图像的长宽比例，并将图像缩放成刚好完全显示在所在区域内的最大尺寸。

8、背景图片定位区域

在CSS中，可以使用background-origin属性定义背景图片的定位区域。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 背景图片定位区域 </title>
    <style type="text/css">
      * {margin: 10px; border: 0; padding: 0;}
      .d-background {
        width: 250px;
        height: 250px;
        float: left;
        border: 30px dashed lightsalmon;
        padding: 30px;
        background-color: lightgray;
        background-image: url("images/bg.png");
        background-repeat: no-repeat;
      }
      .d1 {background-origin: content-box;}
      .d2 {background-origin: border-box;}
      .d3 {background-origin: padding-box;}
    </style>
  </head>
  <body>
    <div class="d-background d1"></div>
    <div class="d-background d2"></div>
    <div class="d-background d3"></div>
  </body>
</html>

页面浏览效果：
背景图片定位区域
说明：

样式属性background-origin的属性值为content-box时，表示背景图片在内容区域进行定位。
样式属性background-origin的属性值为border-box时，表示背景图片以边框为基准进行定位。
样式属性background-origin的属性值为padding-box时，表示背景图片在填充区域进行定位。这也是该属性的默认值。

9、背景剪裁区域

在CSS中，可以使用background-clip属性定义背景的剪裁区域。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 背景剪裁区域 </title>
    <style type="text/css">
      * {margin: 10px; border: 0; padding: 0;}
      .d-background {
        width: 160px;
        height: 160px;
        float: left;
        border: 30px dashed lightsalmon;
        padding: 30px;
        background-color: lightgray;
        background-image: url("images/bg.png");
        background-repeat: no-repeat;
        background-origin: border-box;
      }
      .d1 {background-clip: content-box;}
      .d2 {background-clip: border-box;}
      .d3 {background-clip: padding-box;}
    </style>
  </head>
  <body>
    <div class="d-background d1"></div>
    <div class="d-background d2"></div>
    <div class="d-background d3"></div>
  </body>
</html>

页面浏览效果：
背景剪裁区域
说明：

样式属性background-clip的属性值为content-box时，表示剪裁超出盒子内容区域的背景。
样式属性background-clip的属性值为border-box时，表示剪裁超出盒子边框的背景，这也是background-clip属性的默认值。
样式属性background-clip的属性值为padding-box时，表示剪裁超出盒子填充区域的背景。

10、简写形式

在CSS中可以使用background属性一次设置常用的背景属性，background属性的常用语法格式如下：

background: [background-color] [background-image] [background-position][/background-size] [background-repeat] [background-origin] [background-clip];

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 背景图片简写形式 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d-background {
        width: 350px;
        height: 350px;
        border: 30px dashed lightsalmon;
        padding: 30px;
        background: url("images/bg.png") top left/80% repeat padding-box content-box lightgray ;
      }
    </style>
  </head>
  <body>
    <div class="d-background"></div>
  </body>
</html>