前端图片整合/雪碧图/精灵图用法

图片整合（CSS Sprites）又叫css精灵 / 雪碧图原理：图片整合技术是把小图标整合成一张大的背景图片，通过插入背景图和background-position调整图片的位置来显示图片优点:1、减少服务器的请求次数，提升网页的加载速度，减少服务器的带宽2、减小图片的体积缺点:不利于后期的维护整合代码示例：<style>*{margin:0;padding:0;}.wrap{wi

@码上行动

332人浏览 · 2021-05-20 10:51:20

@码上行动 · 2021-05-20 10:51:20 发布

图片整合（CSS Sprites）

又叫css精灵 / 雪碧图

原理：

图片整合技术是把小图标整合成一张大的背景图片，
通过插入背景图和background-position调整图片的位置来显示图片

优点:

1、减少服务器的请求次数，提升网页的加载速度，减少服务器的带宽
2、减小图片的体积

缺点:

不利于后期的维护

整合代码示例：

<style>
	*{margin:0;padding:0;}
	.wrap{
	    width:400px;
	    height: 200px;
	    margin:0 auto;
	    border:3px solid red;
	}
	.item{
	    width: 70px;
	    height: 66px;
	    border:10px solid #000;
	    float: left;
	    margin-right: 40px;
	    background: url(images/bigptr.jpg) no-repeat ;
	}
	.box1{
	    background-position: -105px -166px;
	    }
	.box2{
	    background-position: -246px -124px;
	    }
	.box3{
	    background-position: -58px -359px;
	    }
</style>
</head>
<body>
    <div class="wrap">
        <div class="item box1"></div>
        <div class="item box2"></div>
        <div class="item box3"></div>
    </div>
</body

总结

以上是对前端图片整合的小总结，后期将继续更新html基础知识点
文章为原创内容，要是遇到有不合适的地方欢迎赐教🙌

技术共进，成长同行——讯飞AI开发者社区

更多推荐

AI智能体—人工智能工作流与人工智能智能体：真正的区别是什么？

本文探讨了人工智能工作流与智能体的核心区别。工作流是静态、可预测的执行序列（如预处理→嵌入→搜索→总结），适合批处理作业；而智能体能动态感知环境、自主决策（感知→推理→决策循环），具备适应性和工具选择能力。关键差异在于：工作流遵循固定路径，智能体则能根据目标调整策略。架构上，工作流使用Airflow等工具，智能体依赖LangChain等框架。智能体的自主性使其更适用于动态环境，代表下一代AI应用方