`

CSS从大图片上截取小图标的使用

 
阅读更多


注：图片名称（tabicons.png）每个小图标width:18px;height:18px

左上角的坐标为(-0px;-0px) 第一个表示图片的宽 第二个表示图标图片的高

例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为(-20px;-0px;)中间依次加20个像素

截取小图标样式

.icon-config{background-position: -20px -100px;}

使用方式： 

<div id="config" data-options="iconCls:'icon-config'"></div>



分享到：
| JAVA获取路径
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS截取一张图片上的所有图标

    在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或...总之，CSS截取图片上的图标是一种有效的前端性能优化技术，通过合理的CSS编写和图片处理，我们可以轻松地在网页上展示多个图标，并提升用户体验。

    CSS Sprite从大图中截取小图完整教程

    当一个网页需要加载多个小图标或者小图片时，如果不使用CSS Sprite技术，每一张图片都会产生一个单独的HTTP请求，这样会大大降低网页加载效率。而使用CSS Sprite技术，可以将这些小图标合并成一张大图，然后通过背景...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    60.jQuery鼠标移上小图显示大缩略图功能 61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏相册图片自动切换插件 63.[荐]jquery仿flash漂亮横向图片...

    CSS Sprites 技巧

    在网页设计中，"Sprite"一词指的是将多个小图像合并成一个大的图像文件，然后通过CSS的`background-image`和`background-position`属性来定位显示所需的小图像部分。这种方法特别适用于那些需要频繁显示或有动态效果...

    网易云课堂（HTML和CSS）1

    切图目标是区分修饰性和内容型图片，前者如图标、按钮，通常保存为PNG格式；后者如横幅、广告图片，通常使用JPEG格式。 6. **测量视觉稿** 在测量视觉稿时，需要关注高度、宽度、内边距、外边距、边框、定位、...

    仿京东、淘宝图片放大镜图片特效

    这个“仿京东、淘宝图片放大镜图片特效”项目就是实现这样一个功能，让用户在鼠标悬停在商品小图上时，能够看到放大的细节部分，如同使用放大镜一样。 首先，我们需要理解这个项目的结构。根据提供的压缩包文件名，...

    移动端图片上传截取插件photoClip.js

    "移动端图片上传截取插件photoClip.js"就是这样一款专为移动设备设计的图片裁剪工具，它结合了手势识别和传统输入设备的操作方式，让用户在手机和平板等设备上能够方便地对图片进行裁剪和调整。 photoClip.js的核心...

    背景偏移取图标的实现方法

    背景偏移取图标的实现方法是一种常见的前端优化技术，它基于CSS Sprite（雪碧图）的概念，通过将多个小图标合并成一张大图，然后利用CSS的`background-position`属性来定位并显示需要的图标部分，以此减少HTTP请求，...

    屏幕拾色器|截取你屏幕的颜色

    它可能是一个独立的应用程序，比如压缩包中的"屏幕拾色器.exe"，运行后会在用户的桌面上提供一个浮动的小窗口或图标，用户可以通过点击这个窗口或图标激活拾色功能。 使用屏幕拾色器，用户通常会经历以下步骤： 1. ...

    微信小程序uniapp银行卡卡片样式组件

    3. **图片处理**：银行Logo需要适配不同尺寸和格式，可能需要使用CSS背景图或者引入网络图片资源，并进行适当调整。 4. **隐私保护**：银行卡号通常需要部分隐藏，这可以通过计算和截取字符串实现，或者利用CSS伪类...

    jQuery商品图片放大镜查看特效

    通过JavaScript获取原始图片的像素数据，然后根据放大镜的位置和大小，截取对应的部分并放大显示在canvas上。 5. **fonts**：如果存在`fonts`文件夹，可能包含了自定义字体文件，用于增强页面的视觉风格，如品牌...

    图片裁剪插件

    3. **裁剪逻辑**：通过JavaScript处理Canvas的drawImage方法，将图片绘制到一个临时的Canvas上，然后根据用户选择的裁剪区域，截取相应部分的图像。 4. **结果导出**：裁剪完成后，可以使用Canvas的toDataURL方法将...

    HTML 以图片方式保存网页

    例如，使用OCR（Optical Character Recognition）技术识别图片中的文字并保存为可搜索的文本。 总的来说，以图片方式保存网页涉及HTML、CSS、浏览器特性、截图工具和图像处理等多个方面。根据具体需求选择合适的...

    android相册上传插件

    这个“android相册上传插件”恰好满足了这样的需求，它允许用户从本地相册选择图片，或者直接通过摄像头拍照进行上传。不仅如此，该插件还具备图片截取功能，让用户在上传前可以对图片进行编辑，这是一个非常实用且...

    HTML高大上的个人简历.rar

    如果图标是从原有图片截取的，那么它们可能是SVG格式，因为SVG支持矢量图，可以在不同分辨率下保持清晰。同时，这些图标可能还通过CSS进行了样式调整，比如颜色、大小和边框等。 CSS（Cascading Style Sheets）是...

    手机端抽奖

    可以使用CSS3的`background-size`属性或`object-fit`属性来控制图片在容器内的缩放方式，保持图片比例不失真，避免因图片过大导致加载慢或者显示不全的问题。 5. 触摸事件与手势识别 手机端抽奖需要考虑触屏操作，...

    PHP 头像控件

    `i`目录通常用于存放图片资源，可能包含了一些图标或者示例图片，用于头像控件的展示和操作提示。 整个过程通常如下：用户通过前端界面选择本地图片并上传，前端通过Ajax发送文件数据到后端的`uploaded.php`，后端...

    开发小工具

    本案例中的"开发小工具"是一个特别针对图像处理设计的应用，主要用于从图片中选取颜色，且配备有像素尺功能，使其在设计、编程或者色彩搭配工作中尤为实用。 一、取色工具： 取色工具是软件开发中的一个常见组件，...

    jianshen.zipjianshen.zipjianshen.zipjianshen.zip

    综上所述，"jianshen.zip" 包含了一个微信小程序的健身应用的大部分基础资源，涵盖了界面设计、逻辑控制、数据处理和用户体验等方面。开发者可以基于这些文件进行二次开发或学习，以创建或改进一个功能完善的健身小...

Magicbox
Global site tag (gtag.js) - Google Analytics