Question

html里面我想在一个图片上面盖上一层文字，并且文字的背景色是灰色，

如图，这是在html里显示的，
现在我写html代码
<ul class="pictxt">
<li> <div class="img-wrapper"><img src="images/image1.jpg" alt="" width="110" height="110" border="0" /></div><span><a href="#">尹相杰等《新春龙抬头尹相杰等《新春龙抬头</a></span></li>
<li> <div class="img-wrapper"><img src="images/image1.jpg" alt="" width="110" height="110" border="0" /></div><span><a href="#">尹相杰等《新春龙抬头尹相杰等《新春龙抬头</a></span></li>
<li> <div class="img-wrapper"><img src="images/image1.jpg" alt="" width="110" height="110" border="0" /></div><span><a href="#">尹相杰等《新春龙抬头尹相杰等《新春龙抬头</a></span></li>
<li> <div class="img-wrapper"><img src="images/image1.jpg" alt="" width="110" height="110" border="0" /></div><span><a href="#">尹相杰等《新春龙抬头尹相杰等《新春龙抬头</a></span></li>
<li> <div class="img-wrapper"><img src="images/image1.jpg" alt="" width="110" height="110" border="0" /></div><span><a href="#">尹相杰等《新春龙抬头尹相杰等《新春龙抬头</a></span></li>
<li> <div class="img-wrapper"><img src="images/image1.jpg" alt="" width="110" height="110" border="0" /></div><span><a href="#">尹相杰等《新春龙抬头尹相杰等《新春龙抬头</a></span></li>
<li> <div class="img-wrapper"><img src="images/image1.jpg" alt="" width="110" height="110" border="0" /></div><span><a href="#">尹相杰等《新春龙抬头尹相杰等《新春龙抬头</a></span></li>

</ul>

接着是CSS代码：
/*七张图*/
.model{width:1000px;margin:20px auto 0px;overflow:hidden;background:#ffffff; border:1px solid #cccccc; height:250px;}
.model h2.title{height:47px;}
.adr{float:right;margin:2px 2px 0 0;}
.model .cont{padding:20px 0 10px;*padding:20px 0;overflow:hidden;width:1000px;}
ul.pictxt{padding-left:65px;}
ul.pictxt li{width:110px;margin-right:14px; float:left;}
ul.pictxt li span{height:48px;line-height:24px;margin-top:-48px; display:block;text-align:center;overflow:hidden; background-color:#cccccc; filter: alpha(opacity=80); padding:5px;}
.img-wrapper{width:100px; height:100px; z-index:50;}
接下来，看下浏览器的显示：火狐是

ie是如下这样显示的

我想调文字的背景的不透明度，另外调整网页显示的兼容性， 文字是用span加上去的， 并且span 设定的margin-top:-48px; 请问有好点的办法没， 据说margin-top 可以不用写成负数的，





Answer 1

1.图片是一个层。2.在图片的层上再放一个层，给层设置背景色就好了。

追问

求具体解法，我哪里写法做的不对，请指出

Answer 2

刚才看了下，问题就在ul.pictxt li span这个css上。
你在背景上使用了ie独有的alpha滤镜，想兼容chrome和firefox很简单，
再增加一个样式。opacity:0.8; 写在alpha的后面

ul.pictxt li span{
height:48px;
line-height:24px;
margin-top:-48px;
display:block;
text-align:center;
overflow:hidden;
background-color:#cccccc;
filter: alpha(opacity=80);
opacity:0.8;
padding:5px;
}

追问

背景确实是显示了半透明，可是文字也半透明了， 我不想文字也变透明，怎么办， 文字是在span里面写的

追答

如果不想文字半透明的话，文字和背景只能分开写。
一个div一旦设定了透明度，他自身和包含在他里面的元素全部都是要透明的。

尹相杰等《新春龙抬头尹相杰等《新春龙抬头

ul.pictxt li span{
height:48px;
line-height:24px;
margin-top:-48px;
display:block;
text-align:center;
overflow:hidden;
}

.font-bac {
background:#ccc;

filter: alpha(opacity=80);

opacity:0.8;

height:48px;

bottom:0;

position:absolute;
z-index:-1;

padding:5px;

}

按上面写的改就可以了，不过需要注意，span套在div的外面是不对的，建议改成div标签