HTML+CSS實現(xiàn)背景圖片鋪滿頁面的三種方法
發(fā)布時間：2023-07-05 16:58:16 作者：前端菜菜阿海 
我要評論
我要評論在前端頁面設計的時候大家總會遇到要添加背景圖片的情況去美化自己的頁面，本文就介紹了HTML+CSS實現(xiàn)背景圖片鋪滿頁面的三種方法，具有一定的參考價值，感興趣的可以了解一下
針對頁面背景圖片我整理了幾種方法僅供參考
在前端頁面設計的時候大家總會遇到要添加背景圖片的情況去美化自己的頁面，我在之前的前端學習中也逐漸了解到一些方法和問題的解決方式，在下面我為大家的整理好了，僅供參考學習。
一、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將背景圖片鋪滿的幾種常用方法，這些方法可以滿足大多數(shù)前端學習的日常使用需求，效果圖我就不放出來了，大家把圖片的路徑改成自己的就可以使用。更多相關HTML CSS背景圖片鋪滿內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- HTML背景圖片拉伸鋪滿，使用CSS實現(xiàn)圖片的width和height均100%，具體如下，感興趣的朋友可以參考下2013-09-09