jsp和html文件引用同一个css文件，但效果不同，html中的背景图片无法全屏显示

最新推荐文章于 2022-05-18 15:04:50 发布

原创最新推荐文章于 2022-05-18 15:04:50 发布 · 409 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #js

本文探讨了在HTML5标准下，背景图片无法在CSS中全屏显示的问题。作者指出，这可能是因为HTML5废弃了body标签的background属性。通过调整CSS代码，将margin和padding设为0，设置html和body的高度为100%，并使用background-size: cover，可以解决此问题。这个解决方案确保了背景图片在不同标准下的兼容性。

jsp和html文件引用同一个css文件，但效果不同，html中的背景图片无法全屏显示

jsp页面采用是html标准
在这里插入图片描述
html页面采用的是html5标准

在这里插入图片描述

html标准下尹用以下css可以背景全屏，html5标准下不行

在这里插入图片描述

原因：应该是html5 body标签的background属性废弃了
改成以下问题解决

* {
    margin: 0px; padding: 0px;
}
html {
    height: 100%;
}
body{
    background-image: url("../../images/yky/a1.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
}