html和css如何做到让一张图片铺满屏幕呢？
我想做一个系统后台管理登陆界面，页面上只有一张背景图和一个登陆框，可是我不知道如何让这个背景图平铺拉伸页面，求指教...
我想做一个系统后台管理登陆界面，页面上只有一张背景图和一个登陆框，可是我不知道如何让这个背景图平铺拉伸页面，求指教
展开
8个回答
展开全部
设置以重复的方式填满页面(以及是否平铺、何种方式平铺)：
background-repeat: no-repeat;
（默认repeat以重复显示图片的方式铺满页面、no-repeat不平铺）
仅一张图片不重复，以拉伸的方式填满页面）：
background-size: cover;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow-x: hidden;
}
#wrap {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrap img {
width: 100%;
height: 100%;
}
#webContent {
position: absolute;
width: 200px;
height: 100px;
margin: 20% 0 0 40%;
}
</style>
<body>
<div id="wrap"><img src="image/load_pic.jpg" /></div>
<div id="webContent">
<form method="post" action="">
账号<input type="text" name="userCode" /> <br /><br />
密码<input type="password" name="passWord" /> <br /><br />
<p>
<input type="submit" value="登录" /><input type="button" value="取消" />
</p>
</form>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow-x: hidden;
}
#wrap {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrap img {
width: 100%;
height: 100%;
}
#webContent {
position: absolute;
width: 200px;
height: 100px;
margin: 20% 0 0 40%;
}
</style>
<body>
<div id="wrap"><img src="image/load_pic.jpg" /></div>
<div id="webContent">
<form method="post" action="">
账号<input type="text" name="userCode" /> <br /><br />
密码<input type="password" name="passWord" /> <br /><br />
<p>
<input type="submit" value="登录" /><input type="button" value="取消" />
</p>
</form>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
比如<img id='bg' src='bg.jpg'/>
#bg{
position:fixed;
width:100%;
height:100%;
}
万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{padding:0;margin:0;}
#bg{width:100%;height:100%;position:absolute;z-index:-1;}
#login{width:300px;height:200px;background:#fff;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-100px}
</style>
</head>
<body>
<img id="bg" src="http://pic2.nipic.com/20090414/386228_104922058_2.jpg"/>
<div id="login">登录框</div>
</body>
</html>
追问
请问一下，z-index设置成-1是什么意思呢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
no-repeat: 即无论背景图片的大小, 只显示单个背景图片
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（6）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
