关于让网页背景图片全屏显示处理

最新推荐文章于 2024-06-17 10:49:59 发布

bymyself11

最新推荐文章于 2024-06-17 10:49:59 发布

阅读量4.8k

点赞数

分类专栏：使用知识及遇到的问题

本文链接：https://blog.csdn.net/bymyself11/article/details/52118276

版权

使用知识及遇到的问题专栏收录该内容

28 篇文章 0 订阅

订阅专栏

我们在写网页是有的时候需要背景图片全屏显示。但是图片的大小不够的话我们设置为背景图片不重复的情况下图片不会全屏显示

我们可以这样处理

设置两层div，底层div当做背景使用，放置一张图片即可。
<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>

再将网页内容放置到第二层上<div id="content">页面内容</content>

下面是我做的登录界面实例

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type= "text/javascript" src= "<?php echo base_url();?>public/js/jquery.min.js"></script>
<script type= "text/javascript">var baseurl = "<?php echo base_url();?>"</script>
<title>登陆界面</title>
<style>
*{
	margin:0;
	padding:0;
	font-family: Arial,helvetica,"Microsoft Yahei",sans-serif;;
	font-size:16px;
}
body{
    overflow: hidden;//隐藏滚动条
}
 #background{
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
 }

 h1 {
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    margin: 80px auto 50px -25px;
    text-align: center;
    text-shadow: 0 1px 1px #555;
}
.box{
	width:390px;
	height:320px;
	border:solid 1px #ddd;
	border-radius:5px;
	background:#FFF;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-195px;
	margin-top:-160px;/*注意处理浏览器圆角的兼容  */
	-webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
}
.box h2{
	font-weight:normal;
	color:#666;
	font-size:16px;
	line-height:46px;
	height:46px;
	overflow:hidden;
	text-align:center;
	border-bottom:solid 1px #ddd;
	background:#f7f7f7;
}
.input_box{
	width:350px;
	padding-bottom:15px;
	margin:0 auto;
	overflow:hidden;
}
.input_box input{
	float:left;
	width:348px;
	height:40px;
	font-size:14px;
	border:solid 1px #ddd;
	border-radius:5px;
	text-indent:10px;
	outline:none;
	line-height:40px;
}
.input_box button{
	width:350px;
	height:48px;
	background:#008386;
	border:none;
	border-radius:5px;
	outline:none;
	cursor:pointer;
	font-size:16px;
	color:#FFF;
}
#error_box{
	height:40px;
	width:350px;
	margin:0 auto;
	line-height:40px;
	color:#fc4343;
}
</style>
<script>
$(function() {
$("#login").click(function() {
// 处理表单验证和交给后台处理的逻辑
	var oError = document.getElementById("error_box");
	var userName = $("#username").val();
	var password = $("#password").val();
	var isNotError = true;
	if(userName==""){
		oError.innerHTML = "用户名为空 ";
		isNotError = false;
		$("#username").focus();
		return;
	}
	if(password==""){
		oError.innerHTML = "密码为空 ";
		isNotError = false;
		$("#password").focus();
		return;
	}
	$.ajax({
		type: "POST",
		url: baseurl+"index.php/Index/do_login",
		dataType: "json",
		 data: {"username":userName,"password":password},
		//data:dataString,
		success: function(json){
			//登录成功
			if(json.code==10000){

				//g_alert('success','恭喜您登录成功','<?php echo base_url();?>index.php ');
				//alert("ok");
				window.location="<?php echo base_url();?>index.php";
			}
			if(json.code==10001){
				//密码错误
				//alert("密码错误");
				//g_alert('error','您的密码错误');
				oError.innerHTML = "您的密码错误";
				isNotError = false;
				$("#password").focus();
				return;
			}
			if(json.code==10002){
				//用户名不存在
				g_alert('warn','用户名不存在');
				// oError.innerHTML = "用户名不存在 ";
				// isNotError = false;
				// $("#username").focus();
				return;
			}
		}

	});

});
});
//判断是否敲击了Enter键
$(document).keyup(function(event){
    if(event.keyCode ==13){
      $("#login").trigger("click");
    }
});
</script>
</head>
<body>
    <div id="background">
        <img src="<?php echo base_url();?>public/img/logintwo.png" width="100%" height="100%"/>
    </div>

<div id="content"><h1>健客大数据平台</h1>
<form>
    <div class="box">
        <h2>用户登录</h2>
        <div id="error_box"></div>
        <div class="input_box">
            <input type="text" placeholder="请输入账户名" id="username" name="username"/>
        </div>
        <div class="input_box">
            <input type="password" placeholder="请输入密码" id="password" name="password"/>
        </div>
        <div class="input_box">
            <!-- type="button"这里的要这样写不让页面会默认为type="submit"，ajax 提交时页面是不用刷新页面的   而表单提交需要刷新，这里我们是不用刷新色-->
            <button id="login" type="button">登录</button>
        </div>
    </div>
</form>
</content>

</body>
<script type= "text/javascript" src= "<?php echo base_url();?>public/js/promptBox.js"></script>
</html>

bymyself11

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
关于让网页背景图片全屏显示处理

我们在写网页是有的时候需要背景图片全屏显示。但是图片的大小不够的话我们设置为背景图片不重复的情况下图片不会全屏显示我们可以这样处理设置两层div，底层div当做背景使用，放置一张图片即可。<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px
复制链接

扫一扫

专栏目录