CSS中怎么实现图片分割效果-创新互联

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

超过10年行业经验,技术领先,服务至上的经营模式,全靠网络和口碑获得客户,为自己降低成本,也就是为客户降低成本。到目前业务范围包括了:成都网站建设、做网站,成都网站推广,成都网站优化,整体网络托管,成都微信小程序,微信开发,APP应用开发,同时也可以让客户的网站和网络营销和我们一样获得订单和生意!
  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://ybzwz.com/article/djjcdi.html

    其他资讯