HTML+CSS实现背景图片铺满页面的三种方法
发布时间：2023-07-05 16:58:16 作者：前端菜菜阿海 
我要评论
我要评论在前端页面设计的时候大家总会遇到要添加背景图片的情况去美化自己的页面，本文就介绍了HTML+CSS实现背景图片铺满页面的三种方法，具有一定的参考价值，感兴趣的可以了解一下
针对页面背景图片我整理了几种方法仅供参考
在前端页面设计的时候大家总会遇到要添加背景图片的情况去美化自己的页面，我在之前的前端学习中也逐渐了解到一些方法和问题的解决方式，在下面我为大家的整理好了，仅供参考学习。
一、DIV中添加背景图片
代码如下（示例）：
<head>
<meta charset="UTF-8">
<title>图片背景铺满</title>
<style>
div {
/*图片地址 不重复 水平位置居中 垂直位置居中*/
background: url("1.png") no-repeat center center;
height: 100%;
width: 100%;
/*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
background-size:cover;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div></div>
</body>二、img中设置背景图片
代码如下（示例）：
<head>
<meta charset="UTF-8">
<title>图片背景铺满</title>
<style>
img {
width: 100%;
height: 100%;
/*元素的位置相对于浏览器窗口是固定位置*/
position:fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<img src="1.png" alt="">
</body>三、Body中设置背景图片
代码如下（示例）：
<head>
<meta charset="UTF-8">
<title>图片背景铺满</title>
<style>
body {
background:url(1.png) no-repeat;
/*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
background-size:cover;
}
</style>
</head>
<body>
</body>结语
以上就是html+css将背景图片铺满的几种常用方法，这些方法可以满足大多数前端学习的日常使用需求，效果图我就不放出来了，大家把图片的路径改成自己的就可以使用。更多相关HTML CSS背景图片铺满内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- HTML背景图片拉伸铺满，使用CSS实现图片的width和height均100%，具体如下，感兴趣的朋友可以参考下2013-09-09
最新评论