HTML5与CSS3基础语法自学教程（十九）

最新推荐文章于 2023-09-22 22:19:06 发布

原创最新推荐文章于 2023-09-22 22:19:06 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #前端 #html #css

本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注，第一时间看文章！

导读：本小节主要讲解有关图像的内容，其中包含了 HTML 页面中的图像元素以及 CSS 中有关背景图像的内容。图像是除了链接之外的 HTML 页面的重要组成部分之一。

图像元素

HTML <img> 元素在 HTML 页面中表示一个图像，用来引入 HTML 页面外部的一张图片。该元素是一个空元素，如下示例代码展示了 <img> 元素的常见用法：

<img src="./files/HTML5.jpeg" alt="HTML5">

如上述示例所示，<img> 元素具有 2 个常用的属性，具体如下：

src 属性：必选项，用来设置一张图片的路径。该路径可以是绝对路径，也可以是相对路径。
alt 属性：可选项，用来定义了描述图像的替换文本。当浏览器无法正常显示指定图片时，会显示该属性值的内容。

除了以上常用属性之外，<img> 元素还支持其他属性，具体如下：

width 属性和 height 属性：设置图像在浏览器显示时的宽度和高度。建议使用 CSS 中的 width 和 height 属性替代。
HTML5 版本中可以使用的单位是像素（px）。
HTML4 版本中可以使用的单位是像素（px）和百分比值（%）。

注意：无论是通过 <img> 元素的 width 和 height 属性，还是通过 CSS 中的 width 和 height 属性设置宽度和高度，高宽比一定要与原图像的高宽比保持一致，否则该图像会被拉伸。

title 属性：鼠标悬停在图像上时所显示的文本内容。

HTML 标准并没有规定 <img> 元素所支持的图像格式，或者必须支持的图像格式。所以不同浏览器所支持的图像格式可能会不相同。

值得注意的是，从技术角度来说，<img> 元素并没有将一张图像嵌入到 HTML 页面中，只是在 HTML 页面进行占位并指定了该图像文件的路径而已。所以，浏览器在加载解析 HTML 页面时，会单独加载图像文件。如下图所示：

03-01.png

背景图像

背景图像主要是指 CSS 中有关 background 属性的相关内容，该属性是一个简写形式，该属性可以拆分为如下几个 CSS 属性：

background-image 属性
background-repeat 属性
background-position 属性
background-size 属性
background-attachment 属性

背景图像

CSS background-image 属性用来在 HTML 元素设置一张背景图像或多张背景图像。该属性具有 2 个值，具体如下：

none：该关键字表示没有背景图像。

如果设置的图像无法正确加载显示，浏览器会将此情况等同于其值设置为 none（表示无背景图像）。
url(path) 函数：用来引入要显示的背景图像的路径。

支持多背景图像。使用多个 url() 函数引入背景图像，并且 url() 函数之间使用逗号（,）进行分隔。

如下示例代码展示了 background-image 属性的用法：

body {
  background-image: url("files/HTML5.jpeg");
}

上述示例代码运行效果如下图所示：

03-02.png

平铺方式

CSS background-repeat 属性用来设置背景图像的重复方式。背景图像可以按照水平方向、垂直方向或者两轴方向重复或者不重复。

background-repeat 属性具有 4 个值，具体如下：

repeat：图像同时在水平方向和垂直方向进行重复。如果最后一个图像无法显示完整，则会被剪裁。
no-repeat：图像在水平方向和垂直方向都不会重复。
space：图像同时在水平方向和垂直方向进行重复。第一个重复的图像和最后一个重复的图像会被固定在元素的边缘，同时空白间隙会均匀地分布在重复的图像之间。
round：跟随浏览器窗口的尺寸增长，重复的图像会被拉伸（重复的图像之间不存在空白间隙）以铺满整个浏览器窗口。

由于 background-repeat 属性分为水平方向是否重复和垂直方向是否重复，所以该属性的值是两个：

第一个值：表示水平方向图像是否重复。可使用上述 4 个值中的一个。
第二个值：表示垂直方向图像是否重复。可使用上述 4 个值中的一个。

当然，background-repeat 属性也可以使用单个值来进行设置，具体情况如下：

单值	等价于双值
`repeat-x`	`repeat no-repeat`
`repeat-y`	`no-repeat repeat`
`repeat`	`repeat repeat`
`space`	`space space`
`round`	`round round`
`no-repeat`	`no-repeat no-repeat`

如下示例代码展示了 background-repeat 属性的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>平铺方式</title>
  <style>
    div {
      background-image: url("files/starsolid.gif");
      width: 144px;
      height: 84px;
    }

    .no-repeat {
      background-repeat: no-repeat;
    }

    .repeat {
      background-repeat: repeat;
    }

    .repeat-x {
      background-repeat: repeat-x;
    }

    .repeat-y {
      background-repeat: repeat-y;
    }
  </style>
</head>

<body>
  <p>no-repeat</p>
  <div class="no-repeat">&nbsp;</div>
  <p>repeat</p>
  <div class="repeat">&nbsp;</div>
  <p>repeat-x</p>
  <div class="repeat-x">&nbsp;</div>
  <p>repeat-y</p>
  <div class="repeat-y">&nbsp;</div>
</body>

</html>

上述示例代码运行效果如下图所示：

03-03.png

图像位置

CSS background-position 属性用来设置背景图像在 HTML 页面中的初始位置。该属性具有 3 种类型的值，具体如下：

关键字：center、left、right、top 和 bottom，分别表示居中、左边、右边、顶部和底部。
长度值：绝对长度值和相对长度值都可以使用。
百分比值

由于设置的位置同时存在水平方式和垂直方向，所以 background-position 属性的值是两个：

第一个值：表示设置在水平方向的位置。
第二个值：表示设置在垂直方向的位置。

当然，background-position 属性也可以设置为一个值。

background-position 属性在使用时，需要注意如下一些问题：

如果第一个值是一个关键字，那么第二个值不能是相同的关键字。例如第一个值为 top 或 left 的话，那第二个值不能为 top 或 left。
如果背景图像显示的大小与所在元素的大小是相同的话，那么使用百分比值是无效的。这种情况下，如果要设置背景图像的位置，应该使用像素（px）。

如下示例代码展示了 background-position 属性的用法：

.example {
  background-image: url("files/HTML5.jpeg");
  background-repeat: no-repeat;
  background-position: top center;
}

上述示例代码运行效果如下图所示：

03-04.png

图像大小

CSS background-size 属性用来设置背景图像在 HTML 页面中的显示大小。该属性具有 4 种类型的值，具体如下：

cover：缩放背景图像以完全覆盖背景区，可能背景图像部分看不见。
contain：缩放背景图像以完全装入背景区，可能背景区部分空白。
一个值：表示设置背景图像的宽度为这个值，而高度值为 auto。
两个值：第一个值表示设置背景图像的宽度，第二个值表示设置背景图像的高度。

注意：如果使用两个值来设置背景图像的宽度和高度的话，高宽比一定要与原图像的高宽比保持一致，否则该图像会被拉伸。

如下图展示了上述 4 种类型值的效果：

03-05.png

上述 4 种类型值的效果，请参考如下示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>图像大小</title>
  <style>
    #container {
      width: 100%;
      display: flex;
      justify-content: space-around;
      height: 300px;
      overflow: scroll;
      background-color: #EEEEEE;
    }

    .subcontainer {
      width: 100%;
      max-width: 200px;
      margin: 8px;
      padding: 5px;
      background-color: white;
      background-image: url("files/eagle.jpg");
      background-repeat: no-repeat;
      color: white;
      font-family: monospace;
    }

    .contain {
      background-size: contain;
    }

    .cover {
      background-size: cover;
    }

    .width {
      background-size: 120px;
    }

    .width-height {
      background-size: 120px 200px;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="subcontainer contain">contain</div>
    <div class="subcontainer cover">cover</div>
    <div class="subcontainer width">120px</div>
    <div class="subcontainer width-height">120px 200px</div>
  </div>
</body>

</html>

如果是为超过一张图片设置大小的话，需要提供多个值，这些值之间使用逗号（,）分隔。

背景关联

CSS background-attachment 属性用来设置背景图像的位置是在视口内固定的，还是跟随所在的元素区域滚动。该属性具有 3 个值，具体如下：

fixed：表示背景图像相对于视口固定。即使一个元素拥有滚动机制，背景图像也不会随着元素的内容滚动。
local：表示背景图像相对于元素的内容固定。如果一个元素拥有滚动机制，背景图像将会随着元素的内容滚动，并且背景图像的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll：示背景图像相对于元素本身固定，而不是随着元素的内容滚动，但对元素边框是有效的。

上述 3 个值的效果，请参考如下示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>图像关联</title>
  <style>
    .output {
      background-color: #fff;
      overflow: scroll;
      box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, .2);
      padding: 1em;
      height: 300px;
    }

    #default-example {
      height: 600px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    #example-element {
      max-width: 20rem;
      height: 100%;
      background: url("files/lizard.png") right 3rem top 1rem/15rem no-repeat, url("files/moon.jpg") center/10rem;
      color: #fff;
      font-size: 1.5em;
      font-weight: 700;
      overflow: auto;
      padding: 20px;
      text-shadow: 0 0 0.6rem #000, 0 0 0.6rem #000;
    }

    #default-example .attachment {
      background-attachment: local;
    }
  </style>
</head>

<body>
  <div id="output" class="output">
    <section id="default-example">
      <div id="example-element" class="attachment">
        London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November
        weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it
        would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up
        Holborn Hill.
        London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November
        weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it
        would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up
        Holborn Hill.
      </div>
    </section>
  </div>
</body>

</html>

background 属性

CSS background 属性是一个简写属性，用来一次性集中设置各种有关背景的属性。该属性可以用来设置一个或多个属性，其中包含 background-color 属性、background-image 属性、background-position 属性、background-repeat 属性、background-size 属性和background-attachment 属性。

如下示例代码展示了 background 属性的用法：

.example {
  background: url("files/HTML5.jpeg") no-repeat top center;
}

上述示例代码运行效果如下图所示：

03-06.png

精灵图

CSS 中的精灵图又称为雪碧图，应用在使用了众多小图标的网站中。精灵图的做法就是把众多的小图标整合成一个图片，通过 backgroud-postion 属性分别指定使用这张图片中的哪个小图标。

这样做法的好处就是 HTML 页面的外部资源请求减少，对内存和带宽更加友好。如下图所示展示了精灵图：

03-07.png

如下示例代码展示了精灵图的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>精灵图</title>
  <style>
    .example {
      width: 20px;
      height: 20px;
      /* 通过 background-image 属性引入背景图像 */
      background: url("files/toolbars.png") no-repeat;
      /* 通过 background-position 属性设置背景图像偏移量 */
      background-position: 0 -50px;
    }
  </style>
</head>

<body>
  <div class="example"></div>
</body>

</html>

上述示例代码运行效果如下图所示：