第13天：CSS中使用图

最新推荐文章于 2024-03-22 15:04:49 发布

lefex

最新推荐文章于 2024-03-22 15:04:49 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/lefex/article/details/103351456

版权

在实际开发中，图文是应用最多的场景，前面的课程讲解了文字的使用第9天：自我介绍，今天内容是关于在 web 中如何使用图片。CSS 中主要有两种方式可以显示图片，一种是通过设置背景图，另一种是使用 img 标签。

img标签

img标签比较特殊，它默认属于行内（inline）元素。比如下面这段代码在浏览器显示的样式是：

.mini-logo {    width: 30px;    /* 指定行内元素的垂直对齐方式 */    vertical-align: middle;}

<p>我这里有个min版的二维码，扫一扫<img class="mini-logo" src="./images/qrcode.jpg"></p>

width: 表示设置图片的宽度，如果只设置宽度，那么 img 标签的高度会根据图片的大小进行等比缩放。只设置高度也是同样的道理。如果即设置了高度又设置了宽度，那么图片的高度和宽度即为设置的宽高。

vertical-align: 表示在竖直方向上的对齐方式，它有 top、middle、bottom、baseline、sub 和 text-top 这几个值。

src：表示图片的来源，可以是「本地」的图片，也可以是「网络」中的图片。

alt：对图片的描述，供屏幕阅读器或者图片未加载出来时显示。

<img class="logo" src="./images/1.png" alt="公众号二维码">

背景图

背景图的作用是给某个元素添加背景，不会添加额外的元素。可以设置背景颜色或者背景图。

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Day11</title>    <style>        body {            background-color: #eeeeee;        }
    .box {        width: 200px;        height: 200px;        background-color: antiquewhite;        background-image: url('./logo_suyan.png');        background-repeat: no-repeat;        background-position: center;        background-size: cover;    }</style></head>
<body>    <p>背景图 background</p>    <div class="box"></div></body>
</html>

1. background-postion: 表示背景图的起始位置；

background-postion：top | left | bottom | right，在某个边缘的位置，另一个维度为 50%。比如 top，背景图的起始位置为顶部，在X轴方向为 50%，居中显示；

background-postion：center，居中背景图；

background-postion：25% 75%，设置基于背景区域的开始位置，可以为负值；

2.background-postion-x：背景在 x 轴上的位置；

3.background-postion-y：背景在 y 轴上的位置；

4.background-repeat: 背景的重复方式， no-repat 不重复，repeat 重复，repat-x X轴上重复，还有其它关键字，读者可以自行查看

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-repeat。

5.background-size: 背景图的大小；
background-size: cover，缩放背景图以完全覆盖背景区，保持原图的宽高比，可能背景图部分会看不到，填满背景图；
background-size: contain，缩放背景图以完全显示背景图，保持原图的宽高比，可能背景部分区域空白，尽可能把图显示完整；

background-size: 50%，背景图的大小为背景区的百分比；

background-size: 12px，背景图的宽度为 12px，高度按照比例自动缩放；

background-size: 12px 14px，背景图的宽度为 12px，高度14px；

总结

本节内容主要讲解了在 CSS 中如何使用图，可以通过 img 和 background 的方式来设置图。希望本节内容能够重点掌握。为方便学习，我把「素燕」这个公众号修整了一下，可直达小课的内容：