time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】6、解决background-image大小不能调整的问题

【HTML5实践教程】6、解决background-image大小不能调整的问题

时间:2012-11-24 10:59 点击:10092次 字体:[ ]




  之前的教程《 【HTML5实践教程】5、使用box-shadow, border-radius 和 transition创建不同图片样式效果  》,我介绍了如何为图片添加background-image包装,借助box-shadow 和 border-radius为图片设置多种多样的样式,有兴趣的朋友可以回头阅读。但是最近我在设计 PhotoTouch 主题的时候遇到了问题,background-image大小不能调整,这对于响应式设计就不太理想了。今天我们将尝试解决问题。

  demo预览地址:http://webdesignerwall.com/demo/css3-image-styles-part-2/

 

  问题

  大多数浏览器对图片的border-radius 和内嵌 box-shadow效果渲染的并不是很完美。这也就意味着,你不能为图片创建浮雕、高光和压缩等效果。

【HTML5实践教程】6、解决background-image大小不能调整的问题_www.fengfly.com

 

  之前的解决方案

  在之前的解决方案中,我们为图片的包装添加background-image属性,解决了上述问题。

【HTML5实践教程】6、解决background-image大小不能调整的问题_www.fengfly.com

  background-image存在的问题

  使用background-image的问题是,他不能实现图片大小的动态缩放。所以,这种方式对于要求图片缩放的响应式设计来说就不那么适用了。

 

  新解决方案

  新解决方式和之前的有些相似,我们把css3的效果添加到图片遮罩层 :after 伪类上,这样做的好处是图片保持了完整性和可收缩性。

  实现动态效果的jquery语句

  jquery会查询#demo下面所有的图片,然后为他们动态添加 span 包装。

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
  2. <script type="text/javascript">  
  3. $(document).ready(function(){  
  4.  
  5.     $('#demo img').each(function() {  
  6.         var imgClass = $(this).attr('class');  
  7.         $(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>');  
  8.         $(this).removeAttr('class');  
  9.     });  
  10.  
  11. });  
  12. </script> 

  输出结果

  上面的代码会输出下面的结果:

  1. <span class="image-wrap " style="width: auto; height: auto;"> 
  2.     <img src="image.jpg"> 
  3. </span> 

  css技巧

  css技巧很简单,遮罩的效果被用在了.image-wrap:after 上面,border-radius 同时用在了图片和.image-wrap:after上面,来实现样式效果。

【HTML5实践教程】6、解决background-image大小不能调整的问题_www.fengfly.com

  css

 

  1. .image-wrap {  
  2.     position: relative;  
  3.     display: inline-block;  
  4.     max-width: 100%;  
  5.     vertical-align: bottom;  
  6. }  
  7. .image-wrap:after {  
  8.     content: ' ';  
  9.     width: 100%;  
  10.     height: 100%;  
  11.     position: absolute;  
  12.     top: -1px;  
  13.     left: -1px;  
  14.     border: solid 1px #1b1b1b;  
  15.  
  16.     -wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);  
  17.     -moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);  
  18.     box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);  
  19.  
  20.     -webkit-border-radius: 7px;  
  21.     -moz-border-radius: 7px;  
  22.     border-radius: 7px;  
  23. }  
  24.  
  25. .image-wrap img {  
  26.     vertical-align: bottom;  
  27.  
  28.     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);  
  29.     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);  
  30.     box-shadow: 0 1px 2px rgba(0,0,0,.4);  
  31.  
  32.     -webkit-border-radius: 6px;  
  33.     -moz-border-radius: 6px;  
  34.     border-radius: 6px;  

  图片样式

  很多不同的效果,例如:浮雕、抠图、压缩和高光等,都可以通过使用多个内嵌box-shadows属性来实现。当然你也可以通过使用:before,来实现另外的布局效果,例如高光。可以查看demo源代码,去了解更多详情。之后,可以调整你浏览器窗口的大小,来查看图片大小是否发生了变化。

【HTML5实践教程】6、解决background-image大小不能调整的问题_www.fengfly.com

 

  浏览器兼容

  这个技巧,只要是支持 Javascript 和 CSS3 的大多数现代浏览器都支持,例如:Chrome, Firefox, Safari, and IE9+。

 

  原文地址:http://webdesignerwall.com/tutorials/css3-image-styles-part-2

  本文转自:http://www.cnblogs.com/softlover/archive/2012/11/23/2780892.html



本文地址 : http://www.fengfly.com/plus/view-210416-1.html
标签: HTML5 background-image
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: