雪碧图的使用方法&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;此时给他添加边框,边框是有厚度的,边框一共有四个边,也就有四个方向的三角形
设计:
- 宽高设置成0;
- 给他设置一个边框,边框的长度就是三角形高度的一半,给border设置透明色
- 需要哪个方向的三角形给他设置哪个方向的边框即可
代码:
.box {
height: 0;
width: 0;
border: 100px solid transparent;
border-top: 100px solid pink;
}
<body>
<div class="box"></div>
</body>
边框的长度就是三角形高度的2倍
如图:
相关文章
- Leetcode: Encode String with Shortest Length && G面经
- List of 3rd Party .NET UI & Reporting Components
- Android逆向之旅---破解"穿靴子的猫"游戏的收费功能
- Android-68-Tomcat各种启动错误的解决的方法,如:Exception in thread "Thread-6" NoClassDefFoundError,Document base E:
- Cookie && Session && Token
- 【微信小程序】-- 其它常用组件介绍 -- button & image(八)
- Linux系统中同时执行多个脚本运行方法(&&、||、;、&)
- Java8:从匿名内部类到Lambda表达式&方法引用
- Clear file content & command truncate
- 线程事件通知 & 线程方法
- 方法重载(overload) & 封装
- CSDN博客&论坛——“我的2013”年度征文活动火爆进行中!【已结束】
- JAVA二维码编码&解码
- 浮动&清除浮动的四种方法(伪类清除法)
- 保持Service不被Kill掉的方法--双Service守护 && Android实现双进程守护
- 依赖倒置原则DIP&控制反转IOC&依赖注入DI
- 后台执行循环(done &)
- 一、表单和ajax中的post请求&&后台获取数据方法
- 浏览器被劫持(hao123)&暴风激活携带病毒浏览器劫持解决方法
- 【Redis入门笔记 01】redis 安装 & 配置
- 统计学方法&机器学习实战(四) 朴素贝叶斯算法
- C&C++函数实训(国防科大)
- 《C#零基础入门之百识百例》(三十三)方法参数 -- 位置&命名参数 -- 求长方体体积
- iOS开发 - "Cast from pointer to smaller type 'int' loses information” 解决的方法
- svn: Can't convert string from 'UTF-8' to native encoding 解决的方法
- 说谎的简单工厂模式设计模式&工厂方法模式&Abstract Factory模式
- #import </usr/include/objc/objc-class.h> not such file or directory问题的解决方法
- 每天进步一点点-->函数fseek() 使用方法
- mysql update ...select的使用 & update 遇到 disable safe 的解决方法
- 机器学习&深度学习资料
- 【文件处理】——字典写入json文件或TXT文件,读取文件中的字典&TypeError: Object of type ‘ndarray‘ is not JSON serializable错误解决方法
- 还得靠运营商 华为拟借力AT&T打开美国市场
- SQL注入写入一句话php(outfile方式)&中国菜刀连接
- DVWA文件上传出现Incorrect folder permissions&The PHP module GD is not installed.的解决方法