雪碧图的使用方法:
为什么要使用雪碧图?
网页想获得一张图片需要向服务器去申请,申请一次两次不是问题,但是一个网页打开的瞬间,那么多图片,申请过于频繁,于是有了一个好的想法,把需要的一些图片制作成雪碧图,也就是把许多个图片制作成一张大的图片,这样服务器只需要给他发送一次就行啦。
雪碧图如何使用呢?
首先知道雪碧图的原理:
雪碧图是通过调节位置来获取雪碧图中某个小的图片,也就是background-position:"x轴正方向,y轴正方向";
假设上图的矢量图的坐标是(200,50),大小是height:50px ,width:100px,那么想获得这个矢量图的方法就是:先利用background-image="url(地址)"
获取雪碧图,然后让雪碧图向上移动50px,向左移动200px,利用background-position:"-50px -200px";
如此方法就获得了这个图片。
CSS实现矢量小三角:
**原理:**结构放一个空盒子,给盒子的宽高都设置成0;此时给他添加边框,边框是有厚度的,边框一共有四个边,也就有四个方向的三角形
设计:
- 宽高设置成0;
- 给他设置一个边框,边框的长度就是三角形高度的一半,给border设置透明色
- 需要哪个方向的三角形给他设置哪个方向的边框即可
代码:
.box {
height: 0;
width: 0;
border: 100px solid transparent;
border-top: 100px solid pink;
}
<body>
<div class="box"></div>
</body>
边框的长度就是三角形高度的2倍
如图: