应用CSS完成照片切分实际效果的简易方式详细介

日期:2021-03-04 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

大家看来1个事例,大伙儿毫无疑问能搞清楚css是如何完成切分照片的。

CSS Code拷贝內容到剪贴板
  1. <HTML>     
  2. <head>     
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />     
  4. <style type="text/css">     
  5. .photo1 {     
  6.  background-imageurl("css_cut.gif");      #界定了1个情况照片     
  7.  background-position: 100% 100%;            #情况部位放到最右下角     
  8.  height50px;                                                             #div的高宽比     
  9.  width50px;                                                             #div的宽度     
  10. }     
  11.      
  12. .photo2 {     
  13.  background-imageurl("css_cut.gif");            #界定了1个情况照片,和上面的照片是1样的     
  14.  background-position: 0 0;                                    #情况部位放到最左上角     
  15.  height50px;                                                            #div的高宽比     
  16.  width50px;                                                            #div的宽度     
  17. }     
  18. </style>     
  19. </head>     
  20. <body>     
  21. <div class="photo1"> </div>     
  22. <strong>她们2个分户了</srong>     
  23. <div class="photo2"> </div>     
  24. </body>     
  25. </HTML>   

下面看1下网页页面上显示信息的結果是甚么

根据css大家把1个照片,分为2一部分。
当大家界定了background-position: 0 0;此时情况照片将被精准定位于目标不包含补钉( padding )的內容地区的左上角,height:50px;width:50px;根据这个特性设定,也便是说向右往下拉了1块面积。
当大家界定了background-position: 100% 100%;此时情况照片将被精准定位于目标不包含补钉( padding )的內容地区的右下角,height:50px;width:50px;根据这个特性设定,也便是说向左上拽了1块面积。
上面只是根表像的1点了解。纯属本人见解