CSS 图片半透明,文字不透明显示
我想在一个DIV加了一个背景图片,用CSS调为半透明状态,在这个DIV层上面了加了文字和图片.
浏览时;;整个全部都是半透明的.
我只要背景图片半透明,背景图片上的文字和图片不要透明,实色的.
请问哪个高手告诉我如何做???????????
悬赏10分哦.帮帮我.
急急急急急急急急急急急急急急急急急急急急急急急急急急!!555555555555555555555
首先谢谢大家给我的方法；但还不够全。
是这样的。我有一个固定的背景做为页面背景，为了不断层的感觉，我用了一个移动层；在这个移动层里面是填写的内容和图片，而这个移动层我需要半透明的，这样能透出页面背景嘛。
可我这个移动层里的文字和图片也跟着半透明啦。
问题结果是：我需要移动层的背景是半透明，里面的内容不要半透明，且随着内容的更加移动层也随着增加。
<html>
<head><title>图片，透明层，文字</title>
<style>
#box1{
float:left;/*浮动定位和相对定位都可以，我这里用的是浮动定位。*/
width:20%;
height:15em;
margin-left:3%;
margin-top:3%;
}
#box2{
float:left;/*浮动定位和相对定位都可以，我这里用的是浮动定位。*/
width:100%;
height:100%;
border:1px solid black;/*给图片做个边框*/
overflow:hidden;/*不准溢出来，做动画效果的时候可能会溢出来，溢出来的部分隐藏起来。*/
}
#picimg{
float:left;/*浮动定位和相对定位都可以，我这里用的是浮动定位。*/
width:100%;
height:100%;
}
#touming{
position:relative;/*这个透明层尽量用相对定位，这样不会跑来跑去，原因目前还不怎么清楚，反正相对ok*/
clear:both;/*清除浮动效果，避免到时候到处乱跑，比如做了过渡动画的时候。*/
width:100%;
height:1.5em;
top:-13.5em;
background:gray;
filter:alpha(Opacity=30);/*设置透明效果30*/
-moz-opacity:0.3;/*设置透明效果0.3*/
opacity: 0.3;/*设置透明效果0.3*/
left:0;/*距离box1距离是0，实际上距离box2的距离也是0*/
}
#words{
position:relative;/*这里用相对定位*/
clear:both;/*清除浮动，这个很有必要，不清除浮动会到处乱跑的。*/
width:100%;/*相对于box1的宽度，实际上也等于box2的宽度*/
height:2em;
color:red;/*设置文字颜色为红色，你自己喜欢什么颜色就弄什么颜色，我比较喜欢红色。*/
top:-15em;/设置成负的，把文字提到box2上面去/
left:0;/*相对于box1,左边距离设置成0*/
text-align:center;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<img id="picimg" src="https://www.baidu.com/img/bd_logo1.png">
</div>
<div id="touming"></div>
<div id="words">这里是要显示的文字</div>
</div>
</body>
</html>
效果图：
效果还不错，透明层有透明效果，文字可以正常显示出来。这个方法还行吧，哈哈。我还会用三个div画一个心形，好看得很哟！！@
10分给偶了
<style type="text/css">
.alpha{filter:alpha(opacity=30);width:400px;}
</style>
<div width="1024" height="768">
<img src="___________.jpg" class="alpha"/>
</div>
<div style=" position:absolute;left:0px; top:0px">
<font color=red>asdfasdfd</font>
<br><br><br><br>sdfsdfsdfsdfsdf<br><br><br>
</div>
或者：
<style type="text/css">
.alpha{filter:alpha(opacity=30);width:400px;}
</style>
<div style="position:relative" width="1024" height="768">
<img src="_______________--" class="alpha"/>
<div style="position:absolute;left:0px; top:0px">
<font color=red>asdfasdfd</font>
<br><br><br><br>sdfsdfsdfsdfsdf<br><br><br>
</div>
</div>本回答被提问者采纳