-moz-opacity:0.8/*在Firefox中设置元素透明度
filter: alpha(opacity=80)/*ie使用滤镜设置透明
但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了。
例如:
<div><p>不透明</p></div>
div{-moz-opacity:0.3filter:alpha(opacity=30)background:#000width:500px
height:500pxcolor:#F30font-size:32pxfont-weight:bold}
可以很明显的看出文字也被半透明的,这是我们不想看到的效果。
以前我曾经是绝对定位的方法解决这个问题,也就是现在的p并不是div的子元素。
<div></div>
<p>不透明</p>
这样div的半透明效果也就不会影响到元素p了。最后在将p定位到需要的位置。
但是很多时候这样的标签并不是很合理,有可能还会多浪费几个标签。
下面的这种方法就可以解决上面的问题了:
div{background:rgba(0,0,0,0.2) none repeat scroll !important/*实现FF背景透明,文字不透明*/
background:#000filter:Alpha(opacity=20)/*实现IE背景透明*/
width:500pxheight:500pxcolor:#F30font-size:32pxfont-weight:bold}
div p{ position:relative}/*实现IE文字不透明*/
方法是可以实现是,就是在链接a中的abc前后加一个span标签就可以了。下面是完整的代码。
<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a{text-decoration:none}
ul,li{list-style: nonemargin:0padding:0}
li.bg a span{visibility:hidden}
</style>
</head>
<body>
<div class="aa">
<ul>
<li class="bg"><a href="#"><span>abcdefghijk</span></a></li>
<li>隐藏的文字在左上角,鼠标放上去看看</li>
</ul>
</div>
</body>
</html>
PS:SEO中通过这样的方法Google会判断你是作弊的,所以最好不要用这种方法,如果你只是想在一个背景图片上面做链接,可以做一个1x1像素的gif透明图片,然后给写成<a href="#" class="mylink"><img src="images/spacer.gif" alt="abc" /></a>
其中的alt写成你要seo的信息,这样也能起来 seo 的作用,而且不会被认为是作弊。
再给你上面的class=aa这个div写一个position: relative,然后再给那个透明的gif图片链接所在层.mylink定义一个position: absolute,通过top和left来绝对定位链接的位置
再通过.mylink img{width: 100pxheight: 22px}的方法定义宽度和高度,这样就大功告成了。