首页 > 软件开发 > HTML >

html设置背景图片平铺方法

来源:互联网 2023-03-16 19:13:33 250

html设置背景图片平铺方法,实际上平铺有多种方法,但是因为图片的大小不同,我们需要不同形式的平铺。kaO办公区 - 实用经验教程分享!

html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

工具/原料

  • html5

方法/步骤

  • 1

    新建一个html文档。kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

  • 2

    设置一下HTML的框架,然后把图片设置在同一个文件夹里面。kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

  • 3

    加入style type="text/css">/style>,这样可以有样式设置。kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

  • 4

    因为背景设置在主体,所以还要定义为body{}。kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

  • 5

    background-image:url(图片),这个是添加图片的意思。kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

  • 6

    然后我们需要加入background-repeat:repeat-x;这个时候就会横向平铺。kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

  • 7

    background-repeat:no-repeat;这样就可以不重复平铺。kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

  • 8

    background-repeat:repeat-y;这个指令是纵向平铺。kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

  • 9

    background-repeat:repeat;这样则是全屏平铺。kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

    html设置背景图片平铺方法kaO办公区 - 实用经验教程分享!

  • 9相关内容非法爬取自百度经验
  • 注意事项

    • 图片的大小设置会影响平铺效果

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!kaO办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码