在网页建造的时辰,凡是需要添加一些布景图,美化整体界面的样子。那么,若何给body设置布景图呢?
打开vscode,建立一个html的测试页面,在测试页面的同级目次添加一张布景图片
在测试页面中,添加一些测试文字内容,因为仅仅只做演示,所以,并没有添加样式
在浏览器中打开测试页面,就可以看到运行的结果
在body标签上面的style属性,添加background-image样式,设置布景图地址指标的目的第一步添加的演示布景图片
在浏览器中再次打开测试页面,就可以看到页面有了布景图。只不外这个时辰的布景图会重叠占有空间,并不会利用一张图片铺满整个浏览器窗口
别的一种写法,就是不写到body标签中,自力出去做当作css样式,同样的设置body布景图的地址,指标的目的第一步添加的演示布景图片。这个时辰,添加多一些样式,让图片拉伸铺满整个浏览器窗口。
background-size: 100% 100%; 设置布景图片填满body标签
background-repeat: no-repeat; 设置布景图片拉伸,而不是反复占满空间
html{height: 100%;} 这是整个页面,占满浏览器当前窗口
在浏览器中打开测试页面,看到运行结果,整个body布满了布景图
0 篇文章
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!