当前位置:Gxlcms > 前端框架 > html怎么设置背景图片全屏平铺?

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

时间:2021-07-01 10:21:17 帮助过:437人阅读

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怎么设置背景图片全屏平铺?的详细内容,更多请关注gxlcms其它相关文章!

人气教程排行