在网页开发里，用CSS加图片本质只有两条路：一条是把图片当作盒模型的背景来渲染，另一条是通过HTML结构放置图片再由CSS控制样式。很多人以为写一行CSS就能凭空插入图片节点，其实CSS只负责绘制，不负责生成内容元素。理解这一点，才能选对方案。
一、使用CSS背景图插入图片
CSS通过background-image属性为元素添加背景图片，这种方式图片不属于文档内容，仅作为视觉装饰存在于元素的背景层。它最常配合background-size、background-position与background-repeat使用，用来控制图片的缩放、位置与平铺行为。
背景图的一个典型优势是易于实现覆盖式布局，比如整屏英雄区海报。下面的例子把一个区块的背景设为图片，并让它完整覆盖且不重复：
.banner {
width: 100%;
height: 400px;
/* 使用url()指定图片路径，注意括号里是字符串 */
background-image: url("https://ipipp.com/demo/banner.jpg");
background-size: cover; /* 等比缩放铺满容器 */
background-position: center; /* 居中显示 */
background-repeat: no-repeat; /* 不重复平铺 */
}
这种写法的好处是图片不会干扰文字排版，文字可以直接叠在上方。缺点是图片不会被搜索引擎当作内容理解，也不能用右键直接保存为页面资源语义节点。对于纯装饰性图形，背景图是首选。
如果我们需要适配高分屏，还可以使用image-set提供多倍图，让浏览器按设备像素比选择。虽然兼容性要留意，但在现代项目中已较为稳妥。
.icon {
width: 32px;
height: 32px;
background-image: image-set(
url("https://ipipp.com/demo/icon-1x.png") 1x,
url("https://ipipp.com/demo/icon-2x.png") 2x
);
background-size: 32px 32px;
}
二、使用HTML的img标签配合CSS
当图片是内容的一部分，比如产品图、文章配图，就应该用<img>标签写进HTML，再用CSS控制它的尺寸与排版。这种方式图片会进入文档流，具备alt文本，可被辅助技术识别，也方便做懒加载与响应式。
下面是一段基础用法，CSS让图片自适应父容器宽度，并保持比例：
<img src="https://ipipp.com/demo/photo.jpg" alt="示例照片" class="responsive-img" />
.responsive-img {
max-width: 100%; /* 不超过父级宽度 */
height: auto; /* 高度自动保持比例 */
display: block; /* 去掉行内图底部空隙 */
}
这种方案的优点是语义清晰、可访问性好，并且浏览器会对img做资源优先级调度。缺点是需要占据布局空间，若不加约束可能导致页面抖动。通常我们会给img设宽高属性或用CSS固定宽高比，避免加载时重排。
在响应式场景中，还可以用object-fit控制图片在固定盒子里的裁剪方式，类似背景图的cover效果，但作用在内容图上：
.thumb {
width: 200px;
height: 150px;
object-fit: cover; /* 填满且裁剪多余部分 */
object-position: center;
}
三、用伪元素间接加背景图
有时我们不想给主元素直接加背景，又希望插入装饰图，可以用::before或::after伪元素设置背景图。伪元素本身由CSS生成，因此这是纯CSS加图片的另一种合法方式，且不会增加HTML节点。
示例是在卡片右上角用伪元素放一个角标图片：
.card {
position: relative;
padding: 16px;
}
.card::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
background-image: url("https://ipipp.com/demo/corner.png");
background-size: contain;
background-repeat: no-repeat;
}
这种写法把装饰图与内容结构彻底分离，维护方便。但要记得伪元素必须设置content才能显示，且定位上下文要由父级position提供。它本质上仍是背景图机制，只是挂在了伪元素盒子上。
四、如何选择合适的方式
从工程角度看，装饰性、不依赖语义的图片用CSS背景图或伪元素；内容性、需被读取和索引的图片用img标签。若项目要求暗黑模式切换，背景图可用CSS变量切换路径，img则要用picture元素或脚本替换src。
| 方式 | 是否进文档流 | 语义性 | 适用场景 |
|---|---|---|---|
| background-image | 否 | 无 | 背景、海报、纹理 |
| img标签 | 是 | 强 | 内容图、产品图 |
| 伪元素背景 | 否 | 无 | 角标、装饰徽章 |
理清这层关系后，css怎么加图片就不再是一个模糊问题，而是根据图片角色做技术选型。写代码时先问自己：这张图是内容还是装饰，答案出来，写法自然确定。
cssbackground_imageimg_tag修改时间：2026-08-06 08:57:32