• 技术文章 >web前端 >html教程

    html怎么设置背景图片

    藏色散人藏色散人2021-04-02 10:07:51原创35824

    html设置背景图片的方法:首先创建一个HTML示例文件;然后在中使用background以及style来设置背景图片即可。

    大前端零基础入门到就业:进入学习

    本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

    HTML设置图片为页面背景:


    问题:

    在HTML页面中不使用CSS盒模型的前提下如何将一张图片设置为页面背景?


    方法:

    在< body >中使用background以及style来设置

    例:

    在这里我把html格式的文件和jpg格式的图片文件都放到了桌面上
    在这里插入图片描述

    <html>
             <head>
    	<meta content="text/html" charset="UTF-8">
    	<title>HTML设置图片为页面背景</title>
             </head>
             <body background="夕阳余晖.jpg" 
                   style="background-repeat:no-repeat               
                   background-attachment:fixed;               
                   background-size:100% 100%; ">
             </body></html>

    运行结果演示:
    在这里插入图片描述


    代码解释:

    background=".../...jpg'"

    双引号中的值为存放图片的路径

    background-repeat:no-repeat;

    设置图片不重复显示

    background-attachment:fixed;

    设置图片的位置固定

    background-size:100% 100%;

    设置图片达到窗口100%的比例

    以上便是HTML中不使用CSS盒模型的情况下,怎么设置一张图片为页面的背景

    推荐学习:《HTML视频教程

    以上就是html怎么设置背景图片的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:html
    上一篇:html怎么设置不换行 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 如何解决html打开乱码问题• jq怎么替换html内容• html怎么去掉超链接的下划线• html怎么设置不换行
    1/1

    PHP中文网