在类似知乎这类的登录界面,大家一般在body里设置背景图片还是用一个div来装载图片???
我的CSS:/*登录界面背景样式*/
.login{
background-image:url(images/loginbg.jpg);
background-size:60% 100%;
}
不知道为什么总是显示不出背景图片;
相关代码:
/*样式初始化*/
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
/*登录界面背景样式*/
.login{
background-image:url(images/loginbg.jpg);
background-size:60% 100%;
}
登录页面简单版:
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>推荐网|给你最好的!</title>
<style>
</style>
</head>
<body class="login" >
<p align="center"><b>推荐网,欢迎你~</b></p>
<form>
<table align="center">
<tr>
<td>登录名:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" /></td>
</tr>
<tr>
<td><input type="submit" value="提交"></td>
<td><input type="reset" value="取消"></td>
</tr>
</table>
</form>
</body>
</html>
背景图片可以放在body里面,也能放在DIV里面。都是可以显示的,这个看自己是对那个对象设置背景了。
显示不出背景图片的原因
1,你的背景图片的路径错了,导致图片显示不出来。
2,你背景图片的对象设置错了。
根据你设置的的CSS:/*登录界面背景样式*/
.login{
background-image:url(images/loginbg.jpg);
background-size:60% 100%;
}
设置的是body的背景图片,对象是正确的。
按照你的代码,我演示的如图
修改下你图片的路径应该就能显示背景图片了。
登录界面的背景图片正常情况下是放在body区域的
如果你需要的是整个页面的背景图片,body区域的才能展示大小
如果你放在div里面的话,这个背景图片做的是div的背景图片