CSS（视频里鼠标经过显示遮罩，CSS高级技巧，精灵图，字体图标）

最新推荐文章于 2023-12-28 09:22:18 发布

Everything_na

最新推荐文章于 2023-12-28 09:22:18 发布

阅读量542

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/Everything_na/article/details/111463742

版权

本文介绍了CSS高级技巧，包括精灵图和字体图标。精灵图可减少服务器请求次数、提高页面加载速度，通过背景位置移动实现。字体图标则解决了精灵图文件大、易失真、更换复杂等问题，具有轻量级、灵活性和兼容性等优点，还给出了下载和引入方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视频经过显示遮罩
核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。
遮罩的盒子不占有位置，就需要用绝对定位和display配合使用

.shipin:hover .mask{
    display:block;
}

CSS高级技巧

精灵图
精灵技术目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度
精灵图sprites的使用
使用精灵图的核心：
1.精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。
2.这个大图片也称为sprites 精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position
4.移动的距离就是这个目标图片x和y坐标，注意网页中的坐标有所不同
5.因为一般情况下都是往下往左移动，所以数值是负值。
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

使用精灵图核心总结：
1.精灵图主要针对于小的背景图片使用
2.主要借助于背景位置来实现-background-position
3.一般情况下精灵图都是负值，（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理。