CSS 图片半透明,文字不透明显示
浏览时;;整个全部都是半透明的.
我只要背景图片半透明,背景图片上的文字和图片不要透明,实色的.
请问哪个高手告诉我如何做???????????
悬赏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>