189 8069 5689

CSS中怎么实现图片分割效果

CSS中怎么实现图片分割效果,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

10年的郸城网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整郸城建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联建站从事“郸城网站设计”,“郸城网站推广”以来,每个客户项目都认真落实执行。

  1.      

  2.      

  3.      

  4.      

  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.  

     

  • 他们二个分家了     

  •  

  •      

  •      

  •    

  • CSS中怎么实现图片分割效果

    下面看一下页面上显示的结果是什么
    CSS中怎么实现图片分割效果

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

    关于CSS中怎么实现图片分割效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


    当前名称:CSS中怎么实现图片分割效果
    转载源于:http://cdxtjz.com/article/pgjjee.html

    其他资讯