banner图上的区域遮盖banner图

在那个banner图上加一块内容，我并没给它设置背景颜色，但是那块内容的背景颜色默认是白色的，这就把我的banner图的那块区域遮挡住了，老师写的时候为啥是透明的

慕先生3009421 2017-09-10

源自：项目：网页布局案例 2-3 主体上面的图片

30

收起

4回答

怎么都被占用了呢回答被采纳获得+3积分 2017-09-11 14:40:33

慕先生3009421 提问者 #1

非常感谢！

2017-09-11 16:18:40

提问者慕先生3009421 2017-09-11 13:21:32

<div class="banner">

<img src="banner3.jpg"/>

<div class="opacity"></div>

<div class="fujia">

<input class="o" type="text" name="username" placeholder="your name"/>

<input class="o" type="text" name="userphone" placeholder="your phone"/>

<input class="o" type="text" name="useremail" placeholder="your email"/>

<input class="p" type="text" name="usercomment" placeholder="your comment"/>

<button>SEND MESSAGE</button>

提问者慕先生3009421 2017-09-10 19:31:22

.banner{width:100%;height:600px;margin-top: 0;}

.banner img{width:100%;height:600px;}

.banner .opacity{width:100%;height:600px;color:black;position:absolute;

opacity:0.5;top:100px;left:0;}

.banner .fujia{width:500px;height:300px; float:left;position: absolute;

top: 50%;left: 50%;margin-top: -150px;margin-left: -250px;z-index: 2;}

.banner .fujia .o{width: 500px;height:40px;border: 1px white solid;}

.banner .fujia .p{width: 500px;height:150px;border: 1px white solid;}

button{width:200px;height:30px;margin-left: 150px}

卡布琦诺 2017-09-10 17:50:20

建议你将代码贴上来，以便于大家更好的发现问题并帮助解答，祝学习愉快！

提问者慕先生3009421 #1

.banner{width:100%;height:600px;margin-top: 0;} .banner img{width:100%;height:600px;} .banner .opacity{width:100%;height:600px;color:black;position:absolute; opacity:0.5;top:100px;left:0;} .banner .fujia{width:500px;height:300px; float:left;position: absolute; top: 50%;left: 50%;margin-top: -150px;margin-left: -250px;z-index: 2;} .banner .fujia .o{width: 500px;height:40px;border: 1px white solid;} .banner .fujia .p{width: 500px;height:150px;border: 1px white solid;} button{width:200px;height:30px;margin-left: 150px}

2017-09-10 19:32:29
卡布琦诺回复提问者慕先生3009421 #2

亲，要有html代码哦，这样才能更好的帮你测试呀~

2017-09-11 09:36:08

相似问题

小慕医生banner区域为什么不能直接用ol？

我的banner区域的图片和顶部区域不在一个页面，怎么设置banner区？

大作业中做到这里，banner部分图片不显示

【banner图】部分上层表格被挤到下方

给标签div,title加绝对定位，会被图片所覆盖

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36713 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载