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效果渲染的并不是很完美。这也就意味着，你不能为图片创建浮雕、高光和压缩等效果。
http://pic002.cnblogs.com/images/2012/303151/2012112119515520.jpg
之前的解决方案
在之前的解决方案中，我们为图片的包装添加background-image属性，解决了上述问题。
http://pic002.cnblogs.com/images/2012/303151/2012112119522666.png
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>
页:
[1]