HTML5实践 -

下一站永远

<div id="cnblogs_post_body">　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/23/2780892.html

　　之前的教程《HTML5实践 -- css3图片样式》，我介绍了如何为图片添加background-image包装，借助box-shadow 和 border-radius为图片设置多种多样的样式，有兴趣的朋友可以回头阅读。但是最近我在设计 PhotoTouch 主题的时候遇到了问题，background-image大小不能调整，这对于响应式设计就不太理想了。今天我们将尝试解决问题。
　　demo预览地址：http://webdesignerwall.com/demo/css3-image-styles-part-2/

　　问题

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


　　之前的解决方案

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

　　background-image存在的问题

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

　　新解决方案

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

　　jquery会查询#demo下面所有的图片，然后为他们动态添加 span 包装。
<div class="cnblogs_code"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){    $('#demo img').each(function() {        var imgClass = $(this).attr('class');        $(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>');        $(this).removeAttr('class');    });});</script>