HTML+CSS實(shí)現(xiàn)背景圖片鋪滿頁(yè)面的三種方法
發(fā)布時(shí)間：2023-07-05 16:58:16 作者：前端菜菜阿海 
我要評(píng)論
我要評(píng)論在前端頁(yè)面設(shè)計(jì)的時(shí)候大家總會(huì)遇到要添加背景圖片的情況去美化自己的頁(yè)面，本文就介紹了HTML+CSS實(shí)現(xiàn)背景圖片鋪滿頁(yè)面的三種方法，具有一定的參考價(jià)值，感興趣的可以了解一下
針對(duì)頁(yè)面背景圖片我整理了幾種方法僅供參考
在前端頁(yè)面設(shè)計(jì)的時(shí)候大家總會(huì)遇到要添加背景圖片的情況去美化自己的頁(yè)面，我在之前的前端學(xué)習(xí)中也逐漸了解到一些方法和問(wèn)題的解決方式，在下面我為大家的整理好了，僅供參考學(xué)習(xí)。
一、DIV中添加背景圖片
代碼如下（示例）：
<head>
<meta charset="UTF-8">
<title>圖片背景鋪滿</title>
<style>
div {
/*圖片地址 不重復(fù) 水平位置居中 垂直位置居中*/
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中設(shè)置背景圖片
代碼如下（示例）：
<head>
<meta charset="UTF-8">
<title>圖片背景鋪滿</title>
<style>
img {
width: 100%;
height: 100%;
/*元素的位置相對(duì)于瀏覽器窗口是固定位置*/
position:fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<img src="1.png" alt="">
</body>三、Body中設(shè)置背景圖片
代碼如下（示例）：
<head>
? <meta charset="UTF-8">
? <title>圖片背景鋪滿</title>
? ? <style>
? ? ? ? body {
? ? ? ? ? ? background:url(1.png) no-repeat;
? ? ? ? ? ? /*把背景圖片放大到適合元素容器的尺寸，圖片比例不變*/
? ? ? ? ? ? background-size:cover;
? ? ? ? }
? ? </style>
</head>
<body>
</body>結(jié)語(yǔ)
以上就是html+css將背景圖片鋪滿的幾種常用方法，這些方法可以滿足大多數(shù)前端學(xué)習(xí)的日常使用需求，效果圖我就不放出來(lái)了，大家把圖片的路徑改成自己的就可以使用。更多相關(guān)HTML CSS背景圖片鋪滿內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS實(shí)現(xiàn)HTML背景圖片拉伸鋪滿示例
HTML背景圖片拉伸鋪滿，使用CSS實(shí)現(xiàn)圖片的width和height均100%，具體如下，感興趣的朋友可以參考下2013-09-09