某日当我给图片添加 CSS3 圆角样式(border-radius)时意识到Firefox并不支持该属性。之后我摸索出一种方法来实现——给原始图像添加span标签并置其本身为背景图像。
效果预览:点击查看
目标
我的目标是运用CSS3 border-radius 和 box-shadow 属性让图片展示以下效果:
问题
问题是浏览器并不能渲染成预期的效果。Webkit 内核浏览器能呈现圆角但不支持内阴影;而Firefox干脆就不正常图片圆角。
CSS技巧
这个技巧相当简单:给图像添加span标签,将原图像作为背景图像。为了隐藏原图像,添加 opacity:0 或 display:none。个人感觉opacity的方法更好,因为此时图像依旧能下载及复制。
运用jQuery的最终解决方案
为了让操作更加简单,我们可以云云jQuery给图像自动添加span标签。
下面的jQuery代码将会自动识别任何带有 .rounded-img 和 rounded-img2 的元素并添加span标签。该脚本能自动识别 src, width, height及原图像的class值,并给span添加内联(inline)属性,接着设置透明度(opacity)为0。
这适合任何尺寸的图像(无论有没有声明图片尺寸)。它还可以与其他的CSS配合使用,无需额外的标记。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$(".rounded-img, .rounded-img2").load(function() {
$(this).wrap(function(){
return '<span style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
});
$(this).css("opacity","0");
});
});
// ]]></script>
用法示例
希望这个技巧对你有用。例如,您可以用它来你的博客的个性头像或个人资料照片。
PS:jQuery代码提供: Darcy Clarke
vsanger2017 年 10 月 01 日下午 5:07
背景图片又该怎么设置圆角?
vsanger2017 年 10 月 01 日下午 5:10
实在太强大了,直接给DIV定义rounded-img也能实现..