<img> 标签，但CSS 完全可以独立写出图片元素—— 既能替代传统图片展示，还能实现图标、装饰图、自适应图形等 img 标签难以搞定的效果，甚至能优化网页加载速度、实现灵活的样式定制。一、先搞懂：CSS 写图片元素的 2 种核心思路
背景图片法：用 CSS 背景属性，把图片加载到任意 HTML 元素（div、span 等）上，替代 img 标签；
纯 CSS 绘图法：不依赖外部图片，只用 CSS 代码画图标、图形、装饰图，真正意义上「CSS 写出图片」。
二、基础实战：CSS 背景图片法（最常用）
<img> 标签的首选，兼容性拉满、用法简单，适合展示商品图、轮播图、背景图等。1. 最简代码：CSS 写出基础图片元素
<!-- HTML：空元素即可，不用写 img -->
<div class="css-image"></div>
<style>
/* CSS：定义图片元素样式 */
.css-image {
/* 1. 设置元素宽高（必须写，否则元素无尺寸） */
width: 300px;
height: 200px;
/* 2. 加载背景图片（替换成你的图片地址） */
background-image: url("https://picsum.photos/300/200");
/* 3. 让图片完整覆盖元素（避免拉伸/变形） */
background-size: cover;
/* 4. 禁止图片重复 */
background-repeat: no-repeat;
/* 可选：让图片居中 */
background-position: center;
}
</style>2. 核心属性详解（新手必记）
background-image：指定图片路径（本地图 / 网络图都支持）；
background-size: cover：图片等比例缩放，填满元素且不变形（最常用）；
background-size: contain：图片完整显示，不裁剪（适合头像、图标）；
background-position：控制图片位置（center/top/left 等）。
3. 进阶：自适应图片元素（响应式必备）
不用媒体查询，让 CSS 图片自动适配屏幕：
.css-image {
width: 100%; /* 宽度占满父容器 */
max-width: 500px; /* 最大宽度，避免过大 */
aspect-ratio: 16/9; /* 固定宽高比（16:9），不用写死高度 */
background-image: url("图片地址");
background-size: cover;
background-position: center;
}三、进阶实战：纯 CSS 绘图（无外部图片，代码即图片）
这是 CSS 「写出图片元素」的高阶玩法，不引用任何图片文件，纯代码画图标、几何图形、装饰元素，适合加载速度要求高的场景（如按钮图标、页面装饰）。
1. 纯 CSS 画圆形头像（无图片）
<div class="css-avatar"></div>
<style>
.css-avatar {
width: 100px;
height: 100px;
border-radius: 50%; /* 圆形 */
/* 用渐变/纯色充当「图片」 */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border: 3px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
</style>2. 纯 CSS 画常用图标（以心形为例）
<div class="css-heart"></div>
<style>
.css-heart {
width: 100px;
height: 90px;
position: relative;
/* 纯 CSS 绘制心形 */
transform: rotate(45deg);
background: #ff4757;
}
.css-heart:before,
.css-heart:after {
content: "";
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4757;
position: absolute;
}
.css-heart:before { left: -50px; top: 0; }
.css-heart:after { left: 0; top: -50px; }
</style>3. 纯 CSS 画装饰性背景图
用渐变、阴影实现纹理背景，替代图片素材：
.css-decor {
width: 100%;
height: 200px;
/* 波浪渐变背景（纯代码） */
background: repeating-linear-gradient(
45deg,
#f0f0f0,
#f0f0f0 10px,
#e8e8e8 10px,
#e8e8e8 20px
);
}四、CSS 写图片元素 vs 传统 img 标签：怎么选？
CSS 背景图片 自适应强、可叠加多层、不占用文档流、可加渐变 / 滤镜 装饰图、轮播图、商品封面、响应式图片
纯 CSS 绘图 零图片请求、加载极快、可动态修改颜色 / 尺寸 图标、按钮装饰、几何图形、简单纹理
img 标签 SEO 友好、语义化强、加载优先级高 文章正文图、产品主图、需要被搜索引擎识别的图片
小技巧：核心内容图用 img，装饰 / 图标用 CSS，兼顾体验和性能。
五、CSS 图片元素的加分技巧（实战必用）
图片懒加载：配合 CSS + 少量 JS，实现图片滚动到可视区域再加载，优化页面速度；
hover 动效：给 CSS 图片加缩放、阴影过渡，提升交互感：
.css-image {
transition: all 0.3s ease;
}
.css-image:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}图片占位符：图片加载前用 CSS 纯色 / 渐变占位，避免页面抖动；
多图叠加：CSS 支持多层背景图片，实现水印、图标叠加效果：
background-image: url("主图.png"), url("水印.png");六、避坑指南：新手写 CSS 图片常见错误
没设置宽高：背景图片必须给元素宽高，否则无法显示；
图片拉伸变形：一定要加 background-size: cover，拒绝拉伸；
路径错误：url() 里的图片路径要正确，本地图用相对路径，网络图用完整链接；
重复显示：忘记加 background-repeat: no-repeat，图片会平铺重复。
总结
CSS 写出图片元素，远不止「替代 img 标签」这么简单：
基础用背景图片法，快速实现自适应图片，替代传统 img；
进阶用纯 CSS 绘图，零资源实现图标、装饰图，优化加载速度；
配合动效、响应式属性，能做出比原生图片更灵活的视觉效果。
不管是前端新手还是实战开发，掌握 CSS 图片写法，都能让你的网页更轻盈、更美观、更易维护！
