html和css如何做到让一张图片铺满屏幕呢？

我想做一个系统后台管理登陆界面，页面上只有一张背景图和一个登陆框，可是我不知道如何让这个背景图平铺拉伸页面，求指教

举报该问题

推荐答案 2016-10-27

设置以重复的方式填满页面(以及是否平铺、何种方式平铺)：

background-repeat: no-repeat;

（默认repeat以重复显示图片的方式铺满页面、no-repeat不平铺）

仅一张图片不重复，以拉伸的方式填满页面）：

background-size: cover;

温馨提示：答案为网友推荐，仅供参考

当前网址：http://11.wendadaohang.com/zd/FMP2PqF2877vFS84qv4.html

其他回答

第1个回答 2015-02-23

<!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>

第2个回答推荐于2019-09-25

比如<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）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本回答被网友采纳

第3个回答 2015-02-23

<!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是什么意思呢

第4个回答 2015-02-23

no-repeat: 即无论背景图片的大小, 只显示单个背景图片

1 2 下一页

相似回答

css如何让背景图全屏显示css如何让背景图全屏显示出来答：步骤一、首先打开需要修改的HTML文件。步骤二、然后始化样式，将代码添加在标签内。步骤三、添加一个p容器，然后命名为bg-box步骤四、背景全屏需要容器全屏，将bg-box的样式补全。步骤五、设置完毕，图片背景以及全屏了。我用HTML做了一个页面想让他在手机浏览器中全屏显示，可是只用了多一半屏幕？首先建...

大家正在搜

css怎么让图片铺满全屏如何让图片在div中铺满 html图片铺满div html图片铺满 css图片铺满 css怎么把图片铺满 css设置div铺满全屏幕 css背景图片铺满 css背景图片自动铺满