如何纯CSS实现HTML全屏背景图

 时间:2026-04-25 03:50:59

1、在电脑桌面新建一个文件夹,并准备好背景图片

如何纯CSS实现HTML全屏背景图

2、然后在文件夹里面新增一个Demo.txt文件

如何纯CSS实现HTML全屏背景图

3、在txt里面写入html基本结构标签

如何纯CSS实现HTML全屏背景图

4、可以body里面写几个文字,然后把demo.txt后缀改成demo.html,直接双击运行,效果如下

如何纯CSS实现HTML全屏背景图

如何纯CSS实现HTML全屏背景图

5、然后右键Demo.html,选编辑

如何纯CSS实现HTML全屏背景图

6、给body加入背景图和高度,html的高度也得加上,核心代码是background: url(bg.jpg) no-repeat;


background-size: 100% 100%;

如何纯CSS实现HTML全屏背景图

7、效果图,发现两边出滚动条了

如何纯CSS实现HTML全屏背景图

8、这是因为标签默认自带的间距引起的,加个去所有标签默认间距代码完美解决: * {margin:0px;padding:0px;}

如何纯CSS实现HTML全屏背景图

9、最终效果图

如何纯CSS实现HTML全屏背景图

  • HTML网页怎样制作二级下拉菜单,二级滑动菜单
  • html+css怎么在图片上添加文字
  • html图片怎么弄成圆形的
  • 利用CSS怎么让文字居中
  • CSS导航菜单水平居中的方法
  • 热门搜索
    额头上长痘痘是怎么回事 大腿内侧减肥 冒险岛枫叶山丘怎么去 手机指南针怎么用 减肥怎么减肚子 爬楼梯能减肥吗 绿茶减肥吗 燕麦片怎样吃减肥 红高粱简介 快速减肥食谱