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

最新推荐文章于 2024-07-05 09:52:23 发布
最新推荐文章于 2024-07-05 09:52:23 发布 · 467 阅读 · 0

本文深入解析了tabicons.png中各小图标的位置坐标与样式设定，提供了直观的实例展示如何通过CSS来精确定位并使用这些图标。通过具体的代码示例，读者可以轻松掌握将小图标应用到网页设计中的技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


注：图片名称（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中背景图片区域截取技术
u013681996的专栏
08-07 8986
在网页前端的制作中，有些时候我们会用到大量的图片。里面包括了很多系列的图片，这个时候我们制作图片的时候大多数人都喜欢把几个或者几十个小图标做在一张图片上，这样可以极大的减少浏览器请求文件的次数，也更利于我们管理图片文件。 我们在使用的时候，利用容器的大小和加载图片时候移动图片的位置在截取我们需要的图片，需要以背景图片的方式载入图片。 比如我们有如下图片： 在载入图片的时候
h5在使用雪碧图做背景时，如何使图标等比例缩放大小？
qq_30432311的博客
07-04 6476
h5页面在使用雪碧图做背景时，其主要利用background-size属性。首先，h5页面的头部要加上&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /&gt;这段代码可以让网页的宽度自动适...
CSS截取一张图片上的所有图标
09-17
截取一张图片的所有ICON图标 图标大小为32×32 效果图纸本人博客上有，大家可以参考。 此处无需资源分，请大家下载后留个言 算是支持下。
CSS从大图片上截取小图标的操作
weixin_33724659的博客
08-02 242
注：图片名称（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 4157
今天上午扣图扣了一上午，写了一个仿天地图的工具栏，无奈我这这个审美眼光感觉有点问题，做出来的老感觉别扭具体那点出问题了又说i不出来，先放张图看看效果： 上图中小图标就是自己一点一点抠出来的： 原图长这样的： 就是这样的一张大图里面有许多的小图 一、需要的css 1、background-image: url(); 背景图片的地址 2、background-position ...
怎么截取图片大小 html,CSS从大图片上截取小图标的操作_html/css_WEB-ITnose
weixin_34975139的博客
06-04 406
.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 Sprite从大图中截取小图完整教程
09-25
当一个网页需要加载多个小图标或者小图片时，如果不使用CSS Sprite技术，每一张图片都会产生一个单独的HTTP请求，这样会大大降低网页加载效率。而使用CSS Sprite技术，可以将这些小图标合并成一张大图，然后通过背景...
移动端图片上传截取插件photoClip.js
06-01
"移动端图片上传截取插件photoClip.js"就是这样一款专为移动设备设计的图片裁剪工具，它结合了手势识别和传统输入设备的操作方式，让用户在手机和平板等设备上能够方便地对图片进行裁剪和调整。 photoClip.js的核心...
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 1766
目录创建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 789
1：clip 定义和用法 clip 属性剪裁绝对定位元素。 当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。 说明 这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容
js + css （clip属性）截取图片
2401_84152189的博客
04-13 446
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 226
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 {
HTML如何剪切图片,css如何截取图片？
weixin_39695490的博客
06-10 1927
CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。使用此属性即可截取图片。css使用clip属性裁剪图片：img{position:absolute;clip:rect(0px 50px 200px 0px)}clip 属性剪切了一幅图像：效果如下：clip 属性剪裁绝对定位元素。当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性...
CSS实现图片裁剪居中（只截取剪裁图片中间部分，图片不变形）
最新发布
weixin_48596030的博客
07-05 2386
CSS实现图片裁剪居中（只截取剪裁图片中间部分，图片不变形）
CSS截图图片的几种方式
热门推荐
SC BK
05-05 1万+
1.使用div 2.使用img 3.使用div+img 4.完整html
图片裁剪--css
qq_36252433的博客
08-09 1329
CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是，大家很少使用此属性。其作用就是页面元素的可用性隐藏。 clip属性要配合着绝对定位使用，代码为img{ position:absolute; clip:rect(上，右，下，左) ;
CSS实现32×32图标提取与样式设计
CSS截取一张图片上的所有图标 这一知识点涉及到CSS技术的应用，具体是如何利用CSS来截取或“挖掘”一张图片中特定大小的图标。这里的操作通常是指从一个包含多个图标的背景图片中，通过CSS定位技术提取出单个图标。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值