css切割图片是什么,两种方法实现css切割图片,只取图片中一部分
参考地址:http://www.jb51.net/css/150036.html
场景:如果一个页面有个img小图标,那么访问浏览器的时候会因为加载图片导致浏览速度放慢。这个时候将这么多的小图标放在一起,整合成一个img,那么只需要访问一张图片就可以了。就可以减少请求图片的次数
整合后的img
那么整合后的img有了,在使用的过程中如何获取我们想要的像素范围呢?上面的参考地址有写。我就照着做一遍吧。
方法一
在CSS中元素的background:background-color || background-image || background-repeate || background-attachment || background-position,示例如下:background:transparent url(123.jpg) no-repeat scroll -140px -20px;transparent 表示透明度无颜色
url(123.jpg) 表示背景图片
no-repeat 表示图片不重复
scroll 表示背景图片随浏览器下拉而滚动
-140px 表示水平位置在图片的-140px处(以图片的左上角为0,0)
-20px 表示垂直位置在图片的-20px处
但是我发现上面的不适合我想要的,
上面的效果来看只能显示图片的右下角。那再试试第二种方法
方法二
用 img 的 clip 属性中的 rect ,clip:rect(y1,y2,x2,x1)参数说明如下
y1 = 定位的 y 坐标(垂直方向)的起点
y2 = 定位的 y 坐标(垂直方向)的终点
x1 = 定位的 x 坐标(垂直方向)的起点
x2 = 定位的 x 坐标(垂直方向)的终点
注意:坐标的起点是在左上角
代码如下:img{
position:absolute;
clip:rect(20px ,100px , 50px , 20px);
}
在实际操作过程中,发现两个问题:1.rect方法里面需要带上逗号,2.必须要带上position,并且需要是绝对定位,也就是absolute 或者 fixed属性。
就这样
css切割图片是什么,两种方法实现css切割图片,只取图片中一部分相关推荐
- html如何将图片做成六边形,css画正六边形的两种方法
说下两种css 制作正六边形的方法. 先看一下结果: 在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3): 方法一:原理把正六边形分成三部分,左中右分别 ...
- qt 加载 图片旋转_QT 实现图片旋转的两种方法
第一种方案 使用 QPixmap 的 transformed 函数来实现旋转,这个函数默认是以图片中心为旋转点,不能设置旋转的中心点,使用如下: QMatrix matrix; matrix.rota ...
- android 图片叠加xml,Android实现图片叠加效果的两种方法
本文实例讲述了Android实现图片叠加效果的两种方法.,具体如下: 效果图: 第一种: 第二种: 第一种是通过canvas画出来的效果: public void first(View v) { // ...
- pytorch加载自己的图片数据集的两种方法
目录 ImageFolder 加载数据集 使用pytorch提供的Dataset类创建自己的数据集. Dataset加载数据集 接下来我们就可以构建我们的网络架构: 训练我们的网络: 保存网络模型(这 ...
- D3D中2D图片的绘制两种方法
2014/09/19 (转载自:http://blog.csdn.net/rabbit729/article/details/6388703) 想要在D3D中加载2D图片可以使用如下两种方法(我只想到 ...
- android 画布叠加,Android实现图片叠加效果的两种方法
本文实例讲述了Android实现图片叠加效果的两种方法.分享给大家供大家参考,具体如下: 效果图: 第一种: 第二种: 第一种是通过canvas画出来的效果: public void first(Vi ...
- html中怎么写正六边形,如何用css画正六边形?用css画正六边形的两种方法(代码实例)...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...
- java 图片压缩100k_Java 实现图片压缩的两种方法
问题背景. 典型的情景:Nemo社区中,用户上传的图片免不了要在某处给用户做展示. 如用户上传的头像,那么其他用户在浏览该用户信息的时候,就会需要回显头像信息了. 用户上传的原图可能由于清晰度较高而体 ...
- android获取位图字节数,Android中获取图片尺寸大小两种方法
两种方法 建议用第二种 private void getPictureSize(String path) { /*第一种直接把bitmap加载到内存中,通过对bitmap的测量, 得出宽高,由于这个 ...
最新文章
- 2020年“3D视觉工坊”视频号最受欢迎视频 Top 10!
- orcal 数据库 maven架构 ssh框架 的全xml环境模版 及常见异常解决
- MySQL---数据库从入门走向大神系列(十五)-Apache的DBUtils框架使用
- 这一团糟的代码,真的是我写的?!
- byte数组存的是什么_字节跳动为什么有字节2个字,因为程序的真谛:字节
- Atitit.ide代码块折叠插件 eclipse
- 【真题21套】计算机二级公共基础知识选择题真题【含解析】
- 有幸为鲍勃大叔的封山之作《匠艺整洁之道》写了推荐序,顺手赠书!
- ZXing条码扫描-竖屏解决方案
- mysql select 列名_Mysql查询出所有列名
- Build error handing
- matlab小船渡河物理模型,高中物理 | 小船渡河模型和斜拉船模型
- linux 系统级性能分析工具 perf 的介绍与使用
- 淘宝按关键词搜索天猫商品接口调用展示
- flash 在firebox/IE中 提示安装 浏览器是否有flash插件
- 优秀网页设计:35个吸引眼球的精美作品集网站
- 怎样通过易查分制作二维码查分系统
- VirtualBox调整分辨率
- 诸葛java_java - 诸葛_子房的个人空间 - OSCHINA - 中文开源技术交流社区
- 微信隐藏功能系列:微信定时提醒,2个步骤,让忙碌中的自己松口气