HTML+CSS实现背景图片铺满页面的三种方法(html怎么用css加背景颜色)
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS实现背景图片铺满页面的三种方法(html怎么用css加背景颜色)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
針對頁面背景圖片我整理了幾種方法僅供參考
在前端頁面設計的時候大家總會遇到要添加背景圖片的情況去美化自己的頁面，我在之前的前端學習中也逐漸了解到一些方法和問題的解決方式，在下面我為大家的整理好了，僅供參考學習。
一、DIV中添加背景圖片
代碼如下（示例）：
<head>
<meta charset="UTF-8">
<title>圖片背景鋪滿</title>
<style>
p {
/*圖片地址 不重復 水平位置居中 垂直位置居中*/
background: url("1.png") no-repeat center center;
height: 100%;
width: 100%;
/*把背景圖片放大到適合元素容器的尺寸，圖片比例不變*/
background-size:cover;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<p></p>
</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实现背景图片铺满页面的三种方法(html怎么用css加背景颜色)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 上海社保缴费标准2021（上海社保缴费标
- 下一篇： vivoS17Pro喇叭进水怎么办 vi