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

最新推荐文章于 2024-07-05 09:52:23 发布
转载 最新推荐文章于 2024-07-05 09:52:23 发布 · 3k 阅读 · 0
文章标签：

#css #easyui

本文介绍了一种从复合图标文件（如 tabicons.png）中截取特定小图标的方法，并详细说明了如何通过 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>



CSS截取一张图片上的所有图标
09-17
截取一张图片的所有ICON图标 图标大小为32×32 效果图纸本人博客上有，大家可以参考。 此处无需资源分，请大家下载后留个言 算是支持下。
CSS Sprite从大图中截取小图完整教程
09-25
当一个网页需要加载多个小图标或者小图片时，如果不使用CSS Sprite技术，每一张图片都会产生一个单独的HTTP请求，这样会大大降低网页加载效率。而使用CSS Sprite技术，可以将这些小图标合并成一张大图，然后通过背景...
CSS从大图片上截取小图标的操作
weixin_33724659的博客
08-02 254
注：图片名称（tabicons.png）每个小图标width:18px;height:18px从左上角坐标为（-0px;-0px;）; 例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为(-20px;-0px;)中间依次加20个像素 截取小图标样式 .icon { background: url(imges/tabicons.png) no-repeat; ...
Css抠图（大图中截取一个小图来显示）
HPUGIS的博客
07-17 4340
今天上午扣图扣了一上午，写了一个仿天地图的工具栏，无奈我这这个审美眼光感觉有点问题，做出来的老感觉别扭具体那点出问题了又说i不出来，先放张图看看效果： 上图中小图标就是自己一点一点抠出来的： 原图长这样的： 就是这样的一张大图里面有许多的小图 一、需要的css 1、background-image: url(); 背景图片的地址 2、background-position ...
阿里巴巴图标png 文件在微信小程序使用 会截取一点 如何处理
最新发布
10-23
根据用户的问题，用户希望解决阿里巴巴图标PNG文件在微信小程序中使用时被截取的问题。结合提供的引用内容，尤其是引用[1]中关于微信小程序进度条的样式属性（如border-radius、activeColor等）和引用[4]中关于微信...
精选资源
移动端图片上传截取插件photoClip.js
06-01
"移动端图片上传截取插件photoClip.js"就是这样一款专为移动设备设计的图片裁剪工具，它结合了手势识别和传统输入设备的操作方式，让用户在手机和平板等设备上能够方便地对图片进行裁剪和调整。 photoClip.js的核心...
CSS实现32×32图标提取与样式设计
CSS截取一张图片上的所有图标 这一知识点涉及到CSS技术的应用，具体是如何利用CSS来截取或“挖掘”一张图片中特定大小的图标。这里的操作通常是指从一个包含多个图标的背景图片中，通过CSS定位技术提取出单个图标。 ...
怎么截取图片大小 html,CSS从大图片上截取小图标的操作_html/css_WEB-ITnose
weixin_34975139的博客
06-04 417
.icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-height:18px; display:inline-block;}.tu0101{background-position:-0px -0px;}.tu0201{background-position:-20px -0px;}.tu0301{backg...
CSS从一个png图片里取出(截取)里面的小图标
热门推荐
鬼谷传人的博客
06-12 1万+
css文件.icon { background: url(icon.png) no-repeat; /*url为png图片的路径*/ /*width和line-height分别对应每个小图标的宽和高*/ width: 20px; line-height: :20px; display: inline-block; } .icon-small { /
css截取图片的方法,CSS基本操作详解及截图演示
weixin_42314420的博客
08-04 1788
目录创建CSS创建CSSa{font-size: 30px;color: #9e61ff;}hello worldhello world运行结果： 创建边框和背景创建边框和背景.c{border-width: 5px;border-color: #9d59ff;border-top-color: #b1ff42;border-style: solid;border-bottom-style: da...
ie6关于css的不兼容
tuku0801的专栏
11-06 813
1：clip 定义和用法 clip 属性剪裁绝对定位元素。 当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。 说明 这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容
js + css （clip属性）截取图片
2401_84152189的博客
04-13 505
top: 200px;top: 0;left: 0;#img1 {#main {width: 7px;.left1 {top: 0;left: 0;.left2 {top: 50%;left: 0;.left3 {top: 100%;left: 0;.center1 {top: 0;left: 50%;.center2 {top: 100%;left: 50%;.right1 {top: 0;left: 100%;.right2 {
js + css （clip属性）截取图片，单页web开发
2401_84097745的博客
04-04 250
top: 200px;top: 0;left: 0;#img1 {#main {width: 7px;.left1 {top: 0;left: 0;.left2 {top: 50%;left: 0;.left3 {top: 100%;left: 0;.center1 {top: 0;left: 50%;.center2 {top: 100%;left: 50%;.right1 {top: 0;left: 100%;.right2 {
CSS中背景图片区域截取技术
u013681996的专栏
08-07 9044
在网页前端的制作中，有些时候我们会用到大量的图片。里面包括了很多系列的图片，这个时候我们制作图片的时候大多数人都喜欢把几个或者几十个小图标做在一张图片上，这样可以极大的减少浏览器请求文件的次数，也更利于我们管理图片文件。 我们在使用的时候，利用容器的大小和加载图片时候移动图片的位置在截取我们需要的图片，需要以背景图片的方式载入图片。 比如我们有如下图片： 在载入图片的时候
HTML如何剪切图片,css如何截取图片？
weixin_39695490的博客
06-10 1957
CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。使用此属性即可截取图片。css使用clip属性裁剪图片：img{position:absolute;clip:rect(0px 50px 200px 0px)}clip 属性剪切了一幅图像：效果如下：clip 属性剪裁绝对定位元素。当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性...
CSS实现图片裁剪居中（只截取剪裁图片中间部分，图片不变形）
weixin_48596030的博客
07-05 2596
CSS实现图片裁剪居中（只截取剪裁图片中间部分，图片不变形）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值