本文摘自PHP中文网,作者黄舟,侵删。
之前的教程《HTML5实践 -- css3图片样式》,我介绍了如何为图片添加background-image包装,借助box-shadow 和 border-radius为图片设置多种多样的样式,有兴趣的朋友可以回头阅读。但是最近我在设计 PhotoTouch 主题的时候遇到了问题,background-image大小不能调整,这对于响应式设计就不太理想了。今天我们将尝试解决问题。问题
大多数浏览器对图片的border-radius 和内嵌 box-shadow效果渲染的并不是很完美。这也就意味着,你不能为图片创建浮雕、高光和压缩等效果。
之前的解决方案
在之前的解决方案中,我们为图片的包装添加background-image属性,解决了上述问题。
background-image存在的问题
使用background-image的问题是,他不能实现图片大小的动态缩放。所以,这种方式对于要求图片缩放的响应式设计来说就不那么适用了。
新解决方案
新解决方式和之前的有些相似,我们把css3的效果添加到图片遮罩层 :after 伪类上,这样做的好处是图片保持了完整性和可收缩性。
实现动态效果的jquery语句
jquery会查询#demo下面所有的图片,然后为他们动态添加 span 包装。
1 2 3 4 5 6 7 8 9 10 |
|
输出结果
上面的代码会输出下面的结果:
1 2 |
|
css技巧
css技巧很简单,遮罩的效果被用在了.image-wrap:after 上面,border-radius 同时用在了图片和.image-wrap:after上面,来实现样式效果。
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
图片样式
很多不同的效果,例如:浮雕、抠图、压缩和高光等,都可以通过使用多个内嵌box-shadows属性来实现。当然你也可以通过使用:before,来实现另外的布局效果,例如高光。可以查看demo源代码,去了解更多详情。之后,可以调整你浏览器窗口的大小,来查看图片大小是否发生了变化。
浏览器兼容
这个技巧,只要是支持 Javascript 和 CSS3 的大多数现代浏览器都支持,例如:Chrome, Firefox, Safari, and IE9+。
以上就是HTML5实践-如何使用css3丰富图片样式的详解(二)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5 ruby标签的定义及使用方法详解(内有实例介绍)
HTML5中返回timeranges对象的属性buffered
HTML5中的postmessage api基本使用方法分享
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者