如何给body设置背景图

在网页建造的时辰,凡是需要添加一些布景图,美化整体界面的样子。那么,若何给body设置布景图呢?

东西/原料

  • vscode

方式/步调

  1. 1

    打开vscode,建立一个html的测试页面,在测试页面的同级目次添加一张布景图片

  2. 2

    在测试页面中,添加一些测试文字内容,因为仅仅只做演示,所以,并没有添加样式

  3. 3

    在浏览器中打开测试页面,就可以看到运行的结果

  4. 4

    在body标签上面的style属性,添加background-image样式,设置布景图地址指标的目的第一步添加的演示布景图片

  5. 5

    在浏览器中再次打开测试页面,就可以看到页面有了布景图。只不外这个时辰的布景图会重叠占有空间,并不会利用一张图片铺满整个浏览器窗口

  6. 6

    别的一种写法,就是不写到body标签中,自力出去做当作css样式,同样的设置body布景图的地址,指标的目的第一步添加的演示布景图片。这个时辰,添加多一些样式,让图片拉伸铺满整个浏览器窗口。

    background-size: 100% 100%; 设置布景图片填满body标签

    background-repeat: no-repeat; 设置布景图片拉伸,而不是反复占满空间

    html{height: 100%;}  这是整个页面,占满浏览器当前窗口

  7. 7

    在浏览器中打开测试页面,看到运行结果,整个body布满了布景图

  • 发表于 2019-06-25 17:01
  • 阅读 ( 1818 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

0 篇文章

作家榜 »

  1. xiaonan123 189 文章
  2. 汤依妹儿 97 文章
  3. luogf229 46 文章
  4. jy02406749 45 文章
  5. 小凡 34 文章
  6. Daisy萌 32 文章
  7. 我的QQ3117863681 24 文章
  8. 华志健 23 文章

联系我们:uytrv@hotmail.com 问答工具