web 三角

最新推荐文章于 2024-10-16 11:23:07 发布

shnzg666

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量60

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/shnzg/article/details/129916247

版权

文章介绍了CSS精灵图(sprites)技术，这是一种通过整合小背景图片到一张大图中，利用background-position属性来减少HTTP请求，提高页面加载效率的方法。文中通过示例代码展示了如何使用精灵图以及它的实现原理。

摘要由CSDN通过智能技术生成

.box1 {
/* 当宽、高为0时，本质是三角形 */
width: 0;
height: 0;
/* 而且三角大小取决于边框的粗细 */
border-top: 10px solid pink;
border-right: 10px solid deeppink;
border-bottom: 10px solid red;
border-left: 10px solid skyblue;
}

.box2 {
/* line-height: 0;
font-size: 0; */
/* 以上是为了照顾兼容性 */
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: black;
}

.jd {
position: relative;
width: 100px;
height: 100px;
background-color: #666;
}

.jd span {
width: 0;
height: 0;
top: -12px;
left: 50px;
position: absolute;
border: 6px solid transparent;
border-bottom-color: #666;
}
</style>

       为什么需要精灵图（sprites）？
           有效的减少服务器和发送请求的次数，提高页面加载速度
       核心原理：将网页中的小背景整合到大的中
精灵技术主要针对背景图片的使用，把多个小背景图整合到大图片中
主要使用的是background-position；
例如：
   <style>
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(../images/sprites.png) no-repeat -182px 0;
}
</style>