05
11 月

运用jQuery打造CSS3完美圆角图片

运用jQuery打造CSS3完美圆角图片

某日当我给图片添加 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

没有评论