• 技术文章 >web前端 >前端问答

    html怎么设置背景图片全屏平铺?

    烟雨青岚烟雨青岚2020-06-17 11:48:43原创12606

    html怎么设置背景图片全屏平铺?

    1、新建一个html文档。

    55d0718c7626deef8662f551960c7ae.png

    2、设置一下HTML的框架,然后把图片设置在同一个文件夹里面。

    ebaa123ad320ce5a42e402928af28cf.png

    9f09a7a4672a517c677bd860fc1476b.png

    3、加入<style type="text/css"></style>,这样可以有样式设置。

    a6c17f00b9cd4c1c4faa1c5f81930f7.png

    4、因为背景设置在主体,所以还要定义为body{}。

    7958c97e8545f0f35199f4ce3cb09ed.png

    5、background-image:url(图片),这个是添加图片的意思。

    a3f0a03a7cb9208a2d3bc6da9a3d364.png

    e3e310633e638a5852495e4d88035bc.png

    6、然后我们需要加入background-repeat:repeat-x;这个时候就会横向平铺。

    d48dfc8143834dc017cd1fd9c25456c.png

    ebd4a6d5e7e2a42fa5b55b1623b2a5a.png

    7、background-repeat:no-repeat;这样就可以不重复平铺。

    d48dfc8143834dc017cd1fd9c25456c.png

    ebd4a6d5e7e2a42fa5b55b1623b2a5a.png

    8、background-repeat:repeat-y;这个指令是纵向平铺。

    0345a7827332f6b143cadea2e7e670a.png

    c739c8a181c814e252b4c668f15a9fe.png

    9、background-repeat:repeat;这样则是全屏平铺。

    50198e2f66771511ba39643a676d69a.png

    aa77e1f003d7c48fef1f6e6d1fe9826.png

    推荐教程: 《HTML教程

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html
    上一篇:vue+element-ui表格封装tag使用slot插槽标签 下一篇:前端三大主流框架是什么?
    大前端线上培训班

    相关文章推荐

    • 值得一看的html5实现简单老虎机的教程(游戏开发)• html实现在线预览文件功能(图文详解)• HTML5 canvas如何实现代码流瀑布?(附代码)• 利用原生js实现html5打砖块小游戏(代码示例)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网