CSS 图片半透明,文字不透明显示

我想在一个DIV加了一个背景图片,用CSS调为半透明状态,在这个DIV层上面了加了文字和图片.浏览时;;整个全部都是半透明的.我只要背景图片半透明,背景图片上的文字和图片... 我想在一个DIV加了一个背景图片,用CSS调为半透明状态,在这个DIV层上面了加了文字和图片.
浏览时;;整个全部都是半透明的.
我只要背景图片半透明,背景图片上的文字和图片不要透明,实色的.
请问哪个高手告诉我如何做???????????

悬赏10分哦.帮帮我.

急急急急急急急急急急急急急急急急急急急急急急急急急急!!555555555555555555555
首先谢谢大家给我的方法;但还不够全。
是这样的。我有一个固定的背景做为页面背景,为了不断层的感觉,我用了一个移动层;在这个移动层里面是填写的内容和图片,而这个移动层我需要半透明的,这样能透出页面背景嘛。
可我这个移动层里的文字和图片也跟着半透明啦。
问题结果是:我需要移动层的背景是半透明,里面的内容不要半透明,且随着内容的更加移动层也随着增加。
展开
 我来答
小鸟蚁人
2019-12-12 · 超过13用户采纳过TA的回答
知道答主
回答量:124
采纳率:71%
帮助的人:8.2万
展开全部

<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画一个心形,好看得很哟!!@

法国和尚
2007-04-29 · TA获得超过1439个赞
知道小有建树答主
回答量:368
采纳率:0%
帮助的人:0
展开全部
最直接的方法。重新制作图片,把图片背景透明设设置小一点,把文字和图片的透明度给弄弄。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友ca55fbd3f
推荐于2016-07-08
知道答主
回答量:18
采纳率:0%
帮助的人:0
展开全部
很简单,不过很难写
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>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
使用龙的魔法师
2007-05-14 · TA获得超过150个赞
知道答主
回答量:37
采纳率:0%
帮助的人:0
展开全部
dfhbcvbd
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
胡同里的庇护所d6
2012-08-10
知道答主
回答量:17
采纳率:0%
帮助的人:2.1万
展开全部
不兼容啊
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 3条折叠回答
收起 更多回答(4)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式