提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

HTML背景图片设置

HTML 设置 背景图片
2023-06-13 09:11:52 时间

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

背景：学习前端知识，自己做页面 目的：学习前端知识 组网图：不涉及 工具：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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/138612.html原文链接：https://javaforall.cn

相关文章