标准模式的背景不像预期的那样行动？
我正在使用Google Chrome扩展名来替换默认的新选项卡页面。每次打开NewTab时，我正在使用的事情之一就是随机更改背景图像。我的CSS和HTML现在的方式，背景填充了整个页面。
但是，在某一时刻，我注意到控制台警报使用了Quirks模式。当我将＆lt; doctype html＆gt;添加到newtab.html时，背景现在适合宽度，但不适合高度。我的代码在下面包括。注意：出于个人隐私原因，将某些HTML删除。注意：我不得不更改newtab.js才能添加randbet，以前我以不同的名称中的另一个文件中有一个。另外，尽管片段看起来不错，但请注意，在NEWTAB上，页面在背景图像中继续以Whitespace为单位。另外，.tile img内容属性设置在单独的文件（icons.css）中。
如何将背景扩展到页面底部（不伸展）？如果不可能，将其留在怪癖模式下会有任何不良影响吗？
// newtab.js
function randBetween(low, high) {
if (!(low > high)) {
low = Math.ceil(low);
high = Math.floor(high)
return Math.floor(Math.random() * (high - low + 1)) + low;
} else {
console.error("Error: low must be less than high in randBetween.")
return 0
}
}
var bgs = [
"https://lh6.googleusercontent.com/proxy/Z0waqwSd3EH7Ot83HrSRk2FfIAM5Dy1oxGZKa8uu31fEL5NH_Jpv6nI8IHd0Y1lFq5xujIdvPRO4g6PXo-k2LFJSsB_YZBQz2A=w3840-h2160-p-k-no-nd-mv",
"https://compass-ssl.xbox.com/assets/94/d0/94d0f456-a14c-4895-ad51-e631990442d9.jpg?n=Minecraft_Sneaky-Slider-1084_Nether_1600x675.jpg",
"https://preview.redd.it/11zl4x2k2tr61.png?width=1920&format=png&auto=webp&s=91a718d1af1617baa146a534cec328befe2e0af8",
"https://whatifgaming.com/wp-content/uploads/2021/08/Glowing-Ores-3-1024x576.png",
"https://i.imgur.com/RAIgYUI.png"
];
var randomBg = bgs[randBetween(0, bgs.length - 1)]
document.body.style.backgroundImage = 'url("' + randomBg + '")'
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('extensions').addEventListener('click', function() {
chrome.tabs.update({
url: 'chrome://extensions'
});
});
});/* newtab.css */
body {
background-position: center center;
background-repeat: no-repeat no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 95%;
}
.links-container {
display: flex;
align-items: center;
justify-content: center;
}
.tile {
width: 100px;
height: 100px;
margin: 5px;
background-color: #30353d;
color: white;
opacity: 60%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-decoration: none;
}
.tile:hover {
opacity: 85%;
}
.tile img {
width: 50px;
height: 50px;
margin: 5px;
}
.tile#extensions {
cursor: pointer;
}
h2 {
color: white;
text-align: center;
}
hr {
width: 100%;
}<html>
<head>
<title>New Tab</title>
<link rel="icon" href="http://assets.stickpng.com/images/588525cd6f293bbfae451a37.png">
<link rel="stylesheet" href="newtab.css">
<link rel="stylesheet" href="icons.css">
</head>
<body>
<div id="main">
<h2>Coding</h2>
<div class="links-container" id="coding">
<a class="tile" href="https://github.com"><img data-site="github">GitHub</a>
<a class="tile" href="https://stackoverflow.com"><img data-site="stackoverflow">StackOverflow</a>
<a class="tile" id="extensions"><img data-site="googledocs">Extensions</a>
</div>
</div>
<script src="newtab.js"></script>
</body>
</html>I am using a Google Chrome extension to replace the default new tab page. One of the things I'm doing with it is randomly changing the background image every time I open newtab. The way my CSS and HTML is now, the background fills the whole page.
However, at one point I noticed the console alert that I was using quirks mode. When I added <DOCTYPE html> to newtab.html, the background now fits to width, but not height. My code is included below. Note: some HTML is removed for personal privacy reasons. Note: I had to change newtab.js to add randBetween, I previously had that in a different file under a different name. Also, although the snippet looks fine, note that on newtab the page continues under the background image as whitespace. Also, .tile img content properties are set in a separate file (icons.css).
How do I extend the background to the bottom of the page (without stretching)? If this isn't possible, will leaving it in quirks mode have any ill affects?
// newtab.js
function randBetween(low, high) {
if (!(low > high)) {
low = Math.ceil(low);
high = Math.floor(high)
return Math.floor(Math.random() * (high - low + 1)) + low;
} else {
console.error("Error: low must be less than high in randBetween.")
return 0
}
}
var bgs = [
"https://lh6.googleusercontent.com/proxy/Z0waqwSd3EH7Ot83HrSRk2FfIAM5Dy1oxGZKa8uu31fEL5NH_Jpv6nI8IHd0Y1lFq5xujIdvPRO4g6PXo-k2LFJSsB_YZBQz2A=w3840-h2160-p-k-no-nd-mv",
"https://compass-ssl.xbox.com/assets/94/d0/94d0f456-a14c-4895-ad51-e631990442d9.jpg?n=Minecraft_Sneaky-Slider-1084_Nether_1600x675.jpg",
"https://preview.redd.it/11zl4x2k2tr61.png?width=1920&format=png&auto=webp&s=91a718d1af1617baa146a534cec328befe2e0af8",
"https://whatifgaming.com/wp-content/uploads/2021/08/Glowing-Ores-3-1024x576.png",
"https://i.imgur.com/RAIgYUI.png"
];
var randomBg = bgs[randBetween(0, bgs.length - 1)]
document.body.style.backgroundImage = 'url("' + randomBg + '")'
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('extensions').addEventListener('click', function() {
chrome.tabs.update({
url: 'chrome://extensions'
});
});
});/* newtab.css */
body {
background-position: center center;
background-repeat: no-repeat no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 95%;
}
.links-container {
display: flex;
align-items: center;
justify-content: center;
}
.tile {
width: 100px;
height: 100px;
margin: 5px;
background-color: #30353d;
color: white;
opacity: 60%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-decoration: none;
}
.tile:hover {
opacity: 85%;
}
.tile img {
width: 50px;
height: 50px;
margin: 5px;
}
.tile#extensions {
cursor: pointer;
}
h2 {
color: white;
text-align: center;
}
hr {
width: 100%;
}<html>
<head>
<title>New Tab</title>
<link rel="icon" href="http://assets.stickpng.com/images/588525cd6f293bbfae451a37.png">
<link rel="stylesheet" href="newtab.css">
<link rel="stylesheet" href="icons.css">
</head>
<body>
<div id="main">
<h2>Coding</h2>
<div class="links-container" id="coding">
<a class="tile" href="https://github.com"><img data-site="github">GitHub</a>
<a class="tile" href="https://stackoverflow.com"><img data-site="stackoverflow">StackOverflow</a>
<a class="tile" id="extensions"><img data-site="googledocs">Extensions</a>
</div>
</div>
<script src="newtab.js"></script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
事实证明，我需要在
vh而不是>％中设置body元素的高度。（谢谢 @astombaugh ）
It turns out I needed to set the height of the
bodyelement invhinstead of%.(Thanks @astombaugh)