css 可以添加几个图片

前言： 在 web 开发中，CSS（层叠样式表）是一种用于描述网页的样式和布局的编程语言。它可以为网页添加颜色，字体，边框以及其他样式。在本问题中，我们需要使用 CSS 添加多个图片到网页中。 解答部分：

1. 使用 background-image 属性添加图片

首先，我们可以使用 CSS 的 background-image 属性，将图片添加为背景图像。这种方法适用于想要将图片放置在元素的背景中。

  .image1 {
    background-image: url('image1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }

上述代码将 image1.jpg 这张图片作为 image1 类的元素的背景图片。设置了 background-repeat: no-repeat; 以及 background-size: cover; 可以分别实现去除背景图片的重复以及自适应元素大小。

2. 使用 <img> 标签添加图片

此外，我们还可以使用 <img> 标签直接在 HTML 中添加图片。比如：

  <img src="image2.jpg" alt="Image 2">

上述代码中，src 属性指定了图片的路径，alt 属性是当图片无法显示时显示的替代文本，可以根据实际情况修改。

3. 使用 CSS 的伪元素添加图片

除了上述方法，我们还可以使用 CSS 的伪元素来添加图片。伪元素是一个在指定元素内部的虚拟元素，我们可以利用这个特性来插入图片。比如：

  .image3::before {
    content: "";
    background-image: url('image3.jpg');
    display: block;
    width: 100px;
    height: 100px;
  }

上述代码中，我们通过 ::before 伪元素，在 .image3 类的元素前插入一个空内容的虚拟元素。然后使用 background-image 属性设置虚拟元素的背景图片，再通过 display: block;、width: 100px; 以及 height: 100px; 设置虚拟元素的展示效果。

总结

在本文中，我们介绍了三种使用 CSS 添加图片的方法：background-image 属性，<img> 标签以及 CSS 的伪元素。借助这些方法，我们可以通过 CSS 在网页中添加不同的图片，实现更丰富多样的页面布局效果。