背景图片为啥出不来 ？？ 我哪里错了？？
来源：2-10 作业题
weixin_慕工程5378897
2021-05-04 23:29:09
/--html--/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>项目作业</title>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<!-- 顶部 -->
<div class="header">
<div class="header-img">
<img src="img/logo.png">
</div>
<div class="header-ul">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<!-- banner -->
<div class="main">
<div class="main-img"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- ABOUT -->
<div></div>
<!-- GALLRY -->
<div></div>
<!-- 页脚区 -->
<div></div>
</body>
</html>
//---css---//
*{
margin: 0;
padding: 0;
}
body{font-family: "Microsoft YaHei UI";}
/*top*/
.header{
background: #07cbc9;
width: 100%;
height: 80px;
float: left;
position: fixed;
}
.header .header-img{
padding-top:16px;
margin-left:100px;
float: left;
}
.header ul{
font-size: 10px;
float: right;
text-align: center;
line-height: 80px;
list-style-type: none;
color: #FFFFFF;
margin-right: 30px;
}
.header ul li{
float: left;
padding: 0 10px;
}
.header ul li a{
text-decoration: none;
color: #FFFFFF;
}
.header ul li a:hover{
color: #E1E100;
}
/*banner*/
.main{
width: 100%;
height: 300px;
border: 1px red solid;
float: left;
margin-top: 80px;
}
.main .main-img{
width: 100%;
height: 300px;
background-image: url("../img/banner3.jpg");
}
2回答
-
好帮手慕久久
2021-05-06
同学你好，“ 文本域上不了图片 ”是说表单区无法显示在图片上吗？如果是的话，同学的表单区已经覆盖在图片上了，只是效果不太好看：
由于表单区是属于.main的内容，所以建议给表单区设置absolute定位，同时设置.main为relative定位，让表单区相对于.main确定自己的位置，如下：
如果不是这里，老师再给你调整一下其他的位置，看能否解答同学的疑惑，如下：
1、在老师的屏幕下，背景图重复了：
原因是页面宽度太大，而背景图宽度太小，所以背景图默认重复显示了。
建议设置背景图的尺寸，让其充满.main-img：
2、表单元素input、textarea宽度要和父元素一致，按钮要居中，代码如下：
祝学习愉快！
0 -
好帮手慕久久
2021-05-05
同学你好，初步怀疑1.css中，背景图的路径写错了。
从html文件中的代码可以看出，html文件与img文件同级，并且html文件与1.css同级：
所以文件夹结构应该是如下样子：
因此css文件中，如果想使用img中的图片，则路径需要写成如下：
祝学习愉快！
0h021-05-05
相似问题