将这个需要覆盖全部页面的半透明容器相对与文档绝对定位,然后设置其宽度高度均为均为100%即可,缺点是容器总是覆盖当前状态下浏览器视口的面积,如果此时调整浏览器宽度或高度为更大值则出现非覆盖区。
JavaScript创建:
先用css进行透明层定位,同上.然后使用bom语句获取当前视口的宽度和高度然后将获取的值分别付给半透明容器的宽度和高度,并创建一个onresize事件函数,一旦用户改变浏览器窗口大小则从新读取这些值,这样即可保证任何情况下均能完全覆盖
1、首先需要打开sublimeText编辑器。
2、然后需要按照图示代码编写一个html页面,并且放入一张背景。
3、效果显示如下图,图片还是原来大小的背景。
4、然后需要按照图示代码利用css属性background-size: cover把整个背景填充。
5、效果显示如下图,图片table高度把屏幕占满。
方法和详细的操作步骤如下:
1、第一步,创建或打开Web项目,新建html文件以及CSS文件,见下图,转到下面的步骤。
2、第二步,执行完上面的操作之后,图中显示了HTML页面代码,定义div并给出id属性等级,见下图,转到下面的步骤。
3、第三步,执行完上面的操作之后,将“height”值设置为零,使用“padding”属性的“top”或“bottom”,同时运用背景色来进行测试,见下图,转到下面的步骤。
4、第四步,执行完上面的操作之后,效果如下,如果进行放大或进行缩小,则宽度和高度将进行相应的更改,见下图。这样,就解决了这个问题了。