空网页上的全 window 背景?
Full-window background on empty webpage?
有没有什么方法可以在不使用视口单位的情况下在空网页上应用完整的window背景?
实际页面不是空的,但它的所有元素都是绝对定位的,当我试图针对不支持 vh
/vw
的浏览器进行验证时,背景停止工作,我猜测原因是流程中没有任何内容,所以 body
没有高度。我可以用绝对单位(像素或 em)固定高度,但这并不完全适合 window 大小。
更新
有些人似乎认为“空网页”不够具体(问题搁置),所以这是一个空网页(好吧,link 到 CSS)的样子:
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<body>
</body>
</html>
至于一个基本的非工作CSS:
body
{
background-image: url('your image');
background-size: 100% 100%;
}
将 "html" 和 "body" 标签的高度设置为 100% 这应该有效。
您可能有几种选择。您可以在带有背景定义的标记顶部放置 position:fixed
div
:
<body>
<div class="window-background"></div>
...
.window-background {
background-image: url('your image');
background-size: cover;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
您可以将背景应用到 HTML
标签:
html {
background-image: url('your image');
background-size: cover;
}
有没有什么方法可以在不使用视口单位的情况下在空网页上应用完整的window背景?
实际页面不是空的,但它的所有元素都是绝对定位的,当我试图针对不支持 vh
/vw
的浏览器进行验证时,背景停止工作,我猜测原因是流程中没有任何内容,所以 body
没有高度。我可以用绝对单位(像素或 em)固定高度,但这并不完全适合 window 大小。
更新
有些人似乎认为“空网页”不够具体(问题搁置),所以这是一个空网页(好吧,link 到 CSS)的样子:
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<body>
</body>
</html>
至于一个基本的非工作CSS:
body
{
background-image: url('your image');
background-size: 100% 100%;
}
将 "html" 和 "body" 标签的高度设置为 100% 这应该有效。
您可能有几种选择。您可以在带有背景定义的标记顶部放置 position:fixed
div
:
<body>
<div class="window-background"></div>
...
.window-background {
background-image: url('your image');
background-size: cover;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
您可以将背景应用到 HTML
标签:
html {
background-image: url('your image');
background-size: cover;
}