用CSS实现的图片透明度链接效果代码
发布时间：2011-12-20 00:59:31 作者：佚名 
我要评论
我要评论一款使用CSS的Alpha透明度实现的图片链接效果，鼠标放上后图片会变为半透明，然后出现文字介绍，+可以加入其它功能，一般是加入收藏，根据你的需要了，可以自己改
复制代码
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用CSS实现的图片透明度链接效果代码 - www.jb51.net</title>
<style type="text/css">
<!--
*{
margin:0px;
padding:0px;
}
body {
margin:20px;
font-size: 12px;
line-height:18px;
}
.blueidea {
background-color: #CCC;
margin:5px;
padding: 3px;
height: 96px;
width: 128px;
position: relative;
float:left;
}
.blueidea a img {
height: 96px;
width: 128px;
border:none;
}
.blueidea a span {
margin-top:-9000px;
margin-left:-9000px;
position: absolute;
}
.blueidea a:hover {
background-color: #FFF;
}
.blueidea a:hover span {
height: 88px;
width: 128px;
position: absolute;
left: 0px;
top: 0px;
border:1px solid #F90;
padding: 10px 2px 2px 2px;
background:#FFF;
filter:alpha(opacity=75);
opacity:0.9;
display: block;
text-decoration: none;
cursor:pointer;
margin:0px;
}
.blueidea em {
position:absolute;
left:5px;
bottom:5px;
width:25px;
height:25px;
cursor:pointer;
background:url(/upload/201112/20111220010926395.gif) no-repeat;
}
.blueidea em:hover {
background-image:url(/upload/201112/20111220010926416.gif) ;}
-->
</style>
</head>
<body>
<div class="blueidea"><a href="#"><img src="/upload/201112/20111220010926820.jpg" alt="" /><span>脚本之家，你今天来了吗？</span></a><em title="我要收藏"></em></div>
<div class="blueidea"><a href="#"><img src="/upload/201112/20111220010926687.jpg" alt="" /><span>收集精品的网页特效</span></a><em title="我要收藏"></em></div>
<div class="blueidea"><a href="#"><img src="/upload/201112/20111220010926289.jpg" alt="" /><span>WebDm.cn做有质量的代码下载站</span></a><em title="我要收藏"></em></div>
</body>
</html>
相关文章
- 这篇文章主要介绍了详解CSS3的opacity属性设置透明效果的用法,同时还讲到了opacity透明度带有的继承性影响子集元素的问题,值得初学者注意,需要的朋友可以参考下2016-05-09
- 这篇文章主要介绍了CSS中文字镂空、透明值、阴影效果设置示例小结,其中通过text-stroke-color透明值的设置可以让文字在某些程度上更加柔和,需要的朋友可以参考下2016-03-07
是一段实现了突出主图片的半透明遮罩lightbox效果代码，当点击一张图片时，这样图片会无刷新弹出放大显示，而周围的图片会被半透明在原位遮罩起来，本段代码适应于所有网页2015-10-22- 这篇文章主要为大家介绍了纯CSS实现多级半透明效果菜单代码,通过纯css实现多级菜单效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-01
- 本文给大家介绍的是CSS结合filter实现简单的图片透明效果的实例，主要使用filter的功能对图片元素进行透明度控制,需要的朋友可以参考下2015-01-13
- PNG透明效果的CSS定义有很多，但兼容各浏览器的却很少，如此，本例的介绍是有必要的了，下面是实现，需要的朋友可以参考下2014-09-17
- 想不想要自己的主页链接很炫呢，背景半透明的链接效果，空链接实现的链接效果，只需要定义一个特效式的CSS样式即可以实现，在需要实现的地方应用定义的CSS样式，也可以全站2013-02-27
- 大家都知道，目前有很多浏览器无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果;那么这篇文章将详细介绍了这几种背景图片的处理方法,需要了解的朋友可以参考下2012-12-24
- 这篇文章主要介绍了CSS实现背景图片透明而文字不透明效果的两种方法,需要的朋友可以参考下2017-04-25
最新评论