首页  >  文章  >  web前端  >  html怎么设置背景图片全屏平铺?

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

烟雨青岚
烟雨青岚原创
2020-06-17 11:48:2323539浏览

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

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

1、新建一个html文档。

55d0718c7626deef8662f551960c7ae.png

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

ebaa123ad320ce5a42e402928af28cf.png

9f09a7a4672a517c677bd860fc1476b.png

3、加入,这样可以有样式设置。

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中文网其他相关文章!

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