欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML+CSS實(shí)現(xiàn)背景圖片鋪滿頁面的三種方法

  發(fā)布時(shí)間：2023-07-05 16:58:16   作者：前端菜菜阿海   我要評(píng)論
在前端頁面設(shè)計(jì)的時(shí)候大家總會(huì)遇到要添加背景圖片的情況去美化自己的頁面，本文就介紹了HTML+CSS實(shí)現(xiàn)背景圖片鋪滿頁面的三種方法，具有一定的參考價(jià)值，感興趣的可以了解一下

針對(duì)頁面背景圖片我整理了幾種方法僅供參考

在前端頁面設(shè)計(jì)的時(shí)候大家總會(huì)遇到要添加背景圖片的情況去美化自己的頁面，我在之前的前端學(xué)習(xí)中也逐漸了解到一些方法和問題的解決方式，在下面我為大家的整理好了，僅供參考學(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é)語

以上就是html+css將背景圖片鋪滿的幾種常用方法，這些方法可以滿足大多數(shù)前端學(xué)習(xí)的日常使用需求，效果圖我就不放出來了，大家把圖片的路徑改成自己的就可以使用。更多相關(guān)HTML CSS背景圖片鋪滿內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論