zl程序教程

您现在的位置是:首页 >  其他

当前栏目

雪碧图的使用方法&css实现矢量小三角

amp方法CSS 实现 矢量 使用
2023-09-11 14:16:57 时间

雪碧图的使用方法:

为什么要使用雪碧图?
网页想获得一张图片需要向服务器去申请,申请一次两次不是问题,但是一个网页打开的瞬间,那么多图片,申请过于频繁,于是有了一个好的想法,把需要的一些图片制作成雪碧图,也就是把许多个图片制作成一张大的图片,这样服务器只需要给他发送一次就行啦。
雪碧图如何使用呢?
首先知道雪碧图的原理:
雪碧图是通过调节位置来获取雪碧图中某个小的图片,也就是background-position:"x轴正方向,y轴正方向";
在这里插入图片描述

假设上图的矢量图的坐标是(200,50),大小是height:50px ,width:100px,那么想获得这个矢量图的方法就是:先利用background-image="url(地址)"获取雪碧图,然后让雪碧图向上移动50px,向左移动200px,利用background-position:"-50px -200px"; 如此方法就获得了这个图片。

CSS实现矢量小三角:

**原理:**结构放一个空盒子,给盒子的宽高都设置成0;此时给他添加边框,边框是有厚度的,边框一共有四个边,也就有四个方向的三角形
设计:

  1. 宽高设置成0;
  2. 给他设置一个边框,边框的长度就是三角形高度的一半,给border设置透明色
  3. 需要哪个方向的三角形给他设置哪个方向的边框即可

在这里插入图片描述
代码:

.box {
    height: 0;
    width: 0;
    border: 100px solid transparent;    
    border-top: 100px solid pink;
}
<body>
    <div class="box"></div>
</body>

边框的长度就是三角形高度的2倍
如图:
在这里插入图片描述
在这里插入图片描述