CSS3设计网页案例:漂亮的网页图片设计CSS实例

作者佚名技术来源 CSS技术浏览发布时间 2012-02-23

译自：CSS3 Image Styles
中文：CSS3图片样式
请尊重版权，转载请注明来源，多谢～～

直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时，浏览器并不能完美的渲染它们。不过，如果把这个图片用作背景图，你就可以可以给它添加任何样式了，浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程，讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。

先看下demo

问题 (见 demo)

看一下demo，请注意在第一行的图片中使用了border-radius和inset box-shadow。Firefox会直接在图片元素上渲染border-radius，但不会渲染inset box-shadow。chrome/safari则两者都不渲染。

border-radius problem

解决方案

要让 border-radius 和 inset box-shadow 正常工作，解决方案就是将实际图片变作background-image.

code

动态方法

要想动态实现，可以简单的使用jQuery为每个图片元素外面包一个背景图片。下面的jQuery代码会将所有图片外面包一个span标签然后将图片用作其背景图片(jQuery代码由Darcy Clarke编写)。

<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(){
 
	$("img").load(function() {
		$(this).wrap(function(){
			return ''<span class="image-wrap '' + $(this).attr(''class'') + ''" 
				style="position:relative; display:inline-block; background:url('' + $(this).attr(''src'') + '') no-repeat center center; width: '' + $(this).width() + ''px; height: '' + $(this).height() + ''px;" />'';
		});
		$(this).css("opacity","0");
	});
});
</script>

输出

上面的脚本将会输出下面的HTML代码：

1
2
3

<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;">
	<img src="image.jpg" style="opacity: 0;">
</span>

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 3 4 5 6 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS3设计动态立体盒子:CSS3透明水晶盒下一篇: CSS网页制作技巧:CSS纯英文数字自动换行

关于CSS3设计网页案例:漂亮的网页图片设计CSS实例的所有评论

随机推荐