HTML背景图片设置

全栈程序员站长

发布于 2022-09-02 11:20:59

5.4K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

背景：学习前端知识，自己做页面目的：学习前端知识组网图：不涉及工具：vscode1.41.0 简介：HTML背景图片设置； HTML背景图片设置background-image：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body { 
   
            background-image: url("imgs/btn1.png");
        }
    </style>
</head>
<body>
    
</body>
</html>

HTML背景图片设置 background-repeat:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        body { 
   
            background-image: url("imgs/btn1.png");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    
</body>
</html>

HTML背景图片设置background-size:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        body { 
   
            background-image: url("imgs/btn1.png");
            background-repeat: no-repeat;
            /* background-position: center; */
            background-size: 100px;
        }
    </style>
</head>
<body>
    
</body>
</html>

HTML背景图片设置代码演练：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        #box { 
   
            text-align: center;
        }
        a { 
   
            display: inline-block;

            width: 160px;
            height: 40px;

            background-repeat: no-repeat;
            background-size: 100%;
        }
        #btn1 { 
   
            background-image: url("imgs/btn1.png");
        }
        #btn2 { 
   
            background-image: url("imgs/btn2.png");
        }
        #btn3 { 
   
            background-image: url("imgs/btn3.png");
        }
        #btn4 { 
   
            background-image: url("imgs/btn4.png");
        }
    </style>
</head>
<body>
    <div id="box">
        <a id="btn1" href="#"></a>
        <a id="btn2" href="#"></a>
        <a id="btn3" href="#"></a>
        <a id="btn4" href="#"></a>
    </div>

</body>
</html>