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

使用CSS实现图片分割效果的简单方法介绍纯CSS3圆形图片鼠标滑过背景视觉差动画特效源码CSS+JS实现带方向感的鼠标滑过图片3D动画特效源码纯HTML5+CSS3制作图片旋转基于CSS剪裁图片实现js幻灯片效果特效源码使用CSS实现中间镂空的图片遮罩效果CSS3实现的为图片添加旋转背景特效源码HTML5+CSS3实现的图片多种滤镜特效源码CSS基础教程十九之CSS图文混排，图像签名，多图拼接和图片特效 基于CSS3实现图片模糊过滤效果基于html5和css3制作炫酷网站带缩略图的图片画廊

2021-09-05 971人已围观

简介 这篇文章主要介绍了使用CSS实现图片分割的简单方法介绍,这种方法只是单纯地在移动像素点而提供一个临时的解决方案,需要的朋友可以参考下

我们来看一个例子，大家肯定能明白css是怎么样实现分割图片的。

CSS Code复制内容到剪贴板
  1.      
  2.      
  3. "Content-Type" content="text/html; charset=utf8" />     
  4. "text/css">     
  5. .photo1 {     
  6.  background-image: url("css_cut.gif");      #定义了一个背景图片     
  7.  background-position: 100% 100%;            #背景位置放到最右下角     
  8.  height: 50px;                                                             #div的高度     
  9.  width: 50px;                                                             #div的宽度     
  10. }     
  11.      
  12. .photo2 {     
  13.  background-image: url("css_cut.gif");            #定义了一个背景图片，和上面的图片是一样的     
  14.  background-position: 0 0;                                    #背景位置放到最左上角     
  15.  height: 50px;                                                            #div的高度     
  16.  width: 50px;                                                            #div的宽度     
  17. }     
  18.      
  19.      
  20.      
  21. "photo1"> 
     
  • 他们二个分家了     
  • "photo2"> 
    •      
  •      
  •    

    • 2016129120239174.gif (50×100)

    下面看一下页面上显示的结果是什么
    2016129120511718.gif (124×135)

    通过css我们把一个图片，分成二部分。
    当我们定义了background-position: 0 0;此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角，height:50px;width:50px;通过这个属性设置，也就是说向右下拉了一块面积。
    当我们定义了background-position: 100％ 100％;此时背景图片将被定位于对象不包括补丁( padding )的内容区域的右下角，height:50px;width:50px;通过这个属性设置，也就是说向左上拉了一块面积。
    上面只是根表像的一点理解。纯属个人观点

    上一篇：CSS视差滚动效果CSS的ul和li实现横向排列和去掉li的点CSS3实现滚动条动画效果代码分享CSS3实现鼠标中轮滚动树生长过程特效源码CSS怎么隐藏滚动条(三种方法)纯css3实现的圆球顺时针滚动效果源码使用CSS3来实现滚动视差效果的教程css实现图片横向排列滚动效果

    下一篇：详解CSS的结构与层叠以及格式化DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加CSS3图片可展开扇形效果的层叠展开特效源码权重和层叠规则决定了CSS样式优先级采用CSS定位属性实现Html中DIV层叠与悬浮CSS层叠样式表的层叠是什么意思(自我理解)CSS中的属性选择符和结构化伪类CSS技术的出现实现结构与表现分离CSS样式按整洁易懂的结构组织将CSS按照层叠式结构化重新组织与构建

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网