巧用CSS为图片添加修饰点缀效果

互诺科技：2008-11-05 09:29 阅读数：标签：

基本原理【Basic Concept】：

要实现本实例的效果，需要在DIV或A等图片容器中添加一个额外的<span>标签，最终的修饰效果就是通过对span设置背景来实现的。当然如果你不希望在你的代码中插入这个span标签，也可以用JS的方法来实现，在本教程中也将提及：

典型的HTML结构如下，其中容器标签DIV视具体情况更改：

复制内容到剪贴板
代码:

以下为引用的内容：

关键的CSS设置如下：
复制内容到剪贴板
代码:

以下为引用的内容：

.photo {
        margin: 30px;
        position: relative;
        width: 180px;
        height: 130px;}

复制内容到剪贴板
代码:

以下为引用的内容：

.photo span {
        width: 20px;
        height: 18px;
        display: block;
        position: absolute;
        top: -12px;
        left: 12px;
        background: url(ximicc.gif) no-repeat;
}

IE6中PNG透明Hack【IE PNG Hack】：

为了让IE6支持PNG的透明属性，我们必须使用一个经典的Hack。下载一份iepngfix.htc放置到网页目录中，并在页面的<head>标签中添加如下代码：
复制内容到剪贴板
代码:

以下为引用的内容：

JQuery方案【The jQuery Solution】：

我知道有些人，尤其是很注重网站优化和可访问性的开发爱好者，不是很愿意在HTML中增加一个额外的span标签，那么这里推荐一个JS应用方案。下载一份jquery.js放置到网页目录中把下列代码添加到页面的<head>中：
复制内容到剪贴板
代码:

以下为引用的内容：

</script>

典型效果预览【Look and Feel】：

下面是这则CSS技巧的典型应用，大家可以在提供的源代码中进行研究，你也可以在不同的浏览器中测试其兼容性。你可以注意一下示例页面的HTML代码，都是一模一样的，其变化都是通过CSS控制来实现的。注意有些效果在CSS或HTML中有细微的变化，具体可以查看示例源码。

site topic网站专题

首页

网站专题

专题详情

分享新闻到：

巧用CSS为图片添加修饰点缀效果

互诺科技：2008-11-05 09:29 阅读数：标签：

020-22265030

0755-23915687

021-32265355

0757-88376239

site topic网站专题

首页

网站专题

专题详情

分享新闻到：

巧用CSS为图片添加修饰点缀效果

互诺科技：2008-11-05 09:29 阅读数： 标签：

020-22265030

0755-23915687

021-32265355

0757-88376239

互诺科技：2008-11-05 09:29 阅读数：标签：