您现在的位置是：网站首页> 编程资料编程资料

两种方法实现用CSS切割图片只取图片中一部分CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2021-09-06 1194人已围观

简介切割图片这里不是真正的切割，只是用CSS取图片中的一部分而已，主要有两种方式，一是做为某一元素的背景图片，二是用img元素的属性。下面有个不错的示例，大家可以参考下

切割图片这里不是真正的切割，只是用CSS取图片中的一部分而已。这样做的好处就是减少了打开网页时请求图片的次数。主要有两种方式，一是做为某一元素的背景图片，二是用img元素的属性。

方法一：

用CSS中元素的background : background-color || background-image || background-repeat || 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处（以图片的左上角为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);
}

上面可以看出控制图片显示的关键在于clip:rect(20px 100px 50px 20px)这句，千万不要忘记position:absolute;这是用于使用绝对值来定位元素。

上一篇：CSS图片翻转动画技术详解（IE也实现了）利用纯css实现图片翻转的效果一款基于css3麻将筛子3D翻转特效的实例教程css3实现3D色子翻转特效一款利用纯css3实现的360度翻转按钮的实例教程CSS滤镜实现的颜色渐变翻转效果纯CSS实现菜单、导航栏的3D翻转动画效果css控制列表与导航的制作(水平导航条、垂直翻转的列表、垂直导航栏、内css3的图形3d翻转效果应用示例CSS旋转与翻转使用示例详解CSS Cookbook 创建文字导航菜单和翻转特效

下一篇：div与span的区别和使用示例关于div中img,span垂直居中的问题深入理解DIV和SPAN的区别浅谈Span和Div的区别DIV和SPAN垂直居中对齐的实现方法div与span之间有什么区别HTML中div与span的区别(共同点与不同点)html的基本使用包括链接、样式表、span和div等等区别div和span、relative和absolute、display和visibilityHTML中div和span比较_动力节点Java学院整理

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢