怎样用css设置全屏背景图片?

在做html页面开发时,我们经常会使用到css的,可以用css设置页面的背景,下面我们就来看一下怎样用css设置全屏背景图片?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

在html里我们不输入任何东西,直接是一个body,加上样式。

1.png

css里为body添加背景图标。

2.png

运行页面,当图片不是很大时,页面的背景只是占一部分。

1586929726161331.png

要铺满整个页面,我们可以简单的使用repeat属性,也是勉强可以的。

4.png

但这种铺满是重复用多张相同的图片来铺的,只有当你的背景图片是纯色等相差不大的情况时,才是可以接受的。

5.png

另一种较为完美的方式,是添加background-size样式,设置为100%,就是让背景图片占满。

6.png

从效果上看,虽然图片有拉伸,但总体来看,是可以接受的。

7.png

更多css相关知识,可访问:web前端自学!!

以上就是怎样用css设置全屏背景图片?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏