两种方法实现用CSS切割图片只取图片中一部分
方法一:
用CSS中元素的background : background-color ||
background-image || background-repeat || background-attachment ||
background-position。 示例代码如下:
no-repeat scroll -140px -20px;
transparent表示透明无颜色
url(123.jpg) 表示背景图片
no-repeat 表示图片不重复
scroll 表示背景图片随浏览器下拉而滚动
-140px 表示水平位置在图片的-140px处(以图片的左上角为0,0)
-20px
表示垂直位置在图片的-20px处(以图片的左上角为0,0)
用img的clip属性中的rect,clip:rect(y1 y1 x2 x1)参数说明如下:
y1=定位的y坐标(垂直方向)的起点
x1=定位的x坐标(水平方向)的起点
y2=定位的y坐标(垂直方向)的终点
x2=定位的x坐标(水平方向)的终点
注:坐标的起点是在左上角
示例代码:
img{
position:absolute;
clip:rect(20px 100px 50px 20px);
}
两种方法实现用CSS切割图片只取图片中一部分的更多相关文章
- .NET MVC中登录过滤器拦截的两种方法
今天给大家介绍两种ASP中过滤器拦截的两种方法. 一种是EF 的HtppModule,另一种则是灵活很多针对MVC的特性类 Attribute 具体什么是特性类可以参考着篇文章:https://www ...
- CSS实现背景图尺寸不随浏览器大小而变化的两种方法
一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看 一些网站的首页 ...
- CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)
CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...
- php如何防止图片盗用/盗链的两种方法(转)
图片防盗链有什么用? 防止其它网站盗用你的图片,浪费你宝贵的流量.本文章向大家介绍php防止图片盗用/盗链的两种方法 Apache图片重定向方法 设置images目录不充许http访问 Apache服 ...
- css:图标与文字对齐的两种方法
(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...
- php如何防止图片盗用/盗链的两种方法
如今的互联网,采集网站非常多,很多网站都喜欢盗链/盗用别人网站的图片,这样不仅侵犯网权,还导致被盗链的网站消耗大量的流量,给服务器造成比较大的压力,本文章向大家介绍php如何防止图片盗用/盗链的两种方 ...
- css划隔横线的两种方法
css划隔横线的两种方法 方法一:用DIV,代码如下:(推荐此方法) <div style="width:800px;height:1px;margin:0px auto;pa ...
- UIImage加载图片的两种方法区别
Apple官方的文档为生成一个UIImage对象提供了两种方法加载图片: 1. imageNamed,其参数为图片的名字: 2. imageWithContentsOfFile,其参数也是图片文件的路 ...
- AE 将地图导出为图片的两种方法
在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或Layout中的图象转出有两种方法,一种为通过IActiveView的OutPut函数,另外一种是通过IExpor ...
随机推荐
- js部分总结
1 currentStyle 可以获取行间样式,但是不兼容 其他浏览器用getComputedStyle(div,null)这个ie低级版本不兼容; if(div.currentStyle){ } e ...
- NSSortDescriptor对象进行数组排序
//创建一个数组 NSArray *array = @[@"zhangsan", @"lisi", @"zhonger", @"z ...
- ppt 数组课后作业
任务要求:随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中. 设计思路:建一个数组,在for语句中将随机数存入数组中,然后每生成一个数就进行相加, ...
- nodejs安装心得
首先下载nodejs,http://nodejs.org/download/ 配置系统环境变量 管理员运行cmd, 输入命令 node -v 查看版本 安装npm Npm安装命令 npm-1.3.15 ...
- LR自定义函数以及调用
2.2.自定义函数以及调用 2.2.1.虚拟用户编程,使用C# 语言DLL 在VS中建立DLL类库项目,编写函数时使用public声明:实现函数后编译生成DLL: 在LR中建立 .Net Vuser脚 ...
- STP的作用和操作
STP的作用 STP通过阻塞端口来消除环路,并能够实现链路备份的目的 STP的操作 选举一个根桥 比较交换机的桥ID,越小越优先 桥ID 是8个字节,2个字节的优先级+6个字节的MAC地址 2.每个 ...
- Java编写最大公约数和最小公倍数
package javaapplication24; class NegativeIntegerException extends Exception{ String message; public ...
- VI的一些快捷键
. $ ctags –R --c-types=+px ($ 为Linux系统Shell提示符) .$ vi –t tag (请把tag替换为您欲查找的变量或函数名) .:ts (ts 助记字:tags ...
- VB.NET TextBox 只允许输入1-100之间的整数 简洁篇
Dim Str As String = "" Private Sub txtRecond_KeyUp(sender As System.Object, e As System.Wi ...
- 深入理解js——作用域和上下文环境
如图除全局作用域外,每个函数都会创建自己的作用域.作用域在函数定义时就确定了,而不是在函数调用时确定. 下面按照程序执行的步骤加上上下文环境. 第一步:程序加载时已经确定全局上下文环境,并随着程序的执 ...