CSS背景位置居中

Question

如何将以下图像放在页面中心？我试过背景位置=中心，但它出现在顶部底部。帮助

$(document).ready(function(){
$('.question-out').hide();
$('.plus-drop-down').hide();
$('i.fa-bars').on('click', function(){
$('.side-menu').css({
'transform': 'translateX(0px)',
'box-shadow': '5px 5px 5px #ddd'
});
});
$('.plus').on('click', function(){
$(this).toggleClass('active');
$('.plus-drop-down').toggle().css({
'animation': 'hello .3s'
});
$('.join').toggle();
});
$('i.fa-th').on('click', function(){
$(this).toggleClass('active');
});
$('.account').on('click', function(){
$(this).toggleClass('active');
});
$('.question-mark').on('click', function(){
$(this).toggleClass('active');
$('.question-out').toggle().css({
'animation': 'pop .3s'
});
});
$('.username').html(
'Gan Yi Ming'
).css({
'color': '#d6d6d6',
'font-size': '12px'
});
$('.email').html(
'[e-mail]'
).css({
'color': '#d6d6d6',
'font-size': '12px'
});
});
$(document).mouseup(function (e) {
const container = $(".side-menu");
const ae = $('.plus');
const re = $('.question-mark');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) {
$('.side-menu').css({
'transform': 'translateX(-300px)',
'box-shadow': 'none'
});
}
if (!re.is(e.target)
&& re.has(e.target).length === 0){
$('.question-out').hide();
$('.question-mark').removeClass('active');
}
if (!ae.is(e.target)
&& ae.has(e.target).length === 0){
$('.plus-drop-down').hide();
$('.plus').removeClass('active');
}
});

*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
font-family: sans-serif;
color: black;
transition: .3s;
}
body{
background-image: url('background.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 30%;
}
.nav_bar{
border-bottom: 1px solid #dddddd;
display: flex;
justify-content: space-between;
line-height: 65px;
position: fixed;
width: 100%;
}
.nav_bar *{
display: flex;
align-items: center;
}
i.fa-bars{
font-size: 20px;
color: #535353;
padding: 10px;
border-radius: 50%;
margin: 0 0px 0 15px;
}
i.fa-bars:hover{
background-color: #f8f8f8;
}
.fa-bars.active{
background-color: #d6d6d6dd;
}
.fa-bars.active:hover{
background-color: #d6d6d6dd;
}
.google-icon{
cursor: default;
transform: translateY(1px) translateX(4px);
}
.classroom{
font-size: 22px;
cursor: text;
color: #353535;
}
.plus{
width: 20px;
padding: 10px;
border-radius: 50%;
margin: 0 10px 0 0;
}
.plus:hover ~ .join{
visibility: visible;
position: absolute;
animation: hello;
}
.plus.active{
background-color: #d6d6d6dd;
}
.plus.active:hover{
background-color: #d6d6d6dd;
}
.plus-drop-down{
background-color: #fff;
position: absolute;
display: inline-block;
border-radius: 3px;
line-height: 30px;
top: 55px;
box-shadow: 0 0 3px 1px rgb(204, 204, 204);
right: 130px;
padding: 5px 0;
}
.plus-drop-down li{
padding: 0 30px 0 15px;
font-size: 15px;
color: #353535;
}
.plus-drop-down li:hover{
background-color: #ddd;
}
.join{
background-color: black;
opacity: 0.7;
color: white;
font-size: 10px;
position: absolute;
border-radius: 3px;
padding: 0 10px;
visibility: hidden;
top: 55px;
height: 30px;
transition: ease-in-out;
transition-delay: .3s;
right: 80px;
}
.th{
color: #4b4b4b;
border-radius: 50%;
padding: 10px;
font-size: 20px;
margin: 0 10px 0 0;
}
.app{
background-color: black;
opacity: 0.6;
color: white;
position: absolute;
border-radius: 2px;
top: 60px;
right: 50px;
border-radius: 3px;
font-size: 12px;
height: 20px;
padding: 0 5px;
visibility: hidden;
transition-delay: .4s;
}
.fa-th:hover ~ .app{
visibility: visible;
}
.account-menu{
position: absolute;
color: rgb(214, 214, 214);
background-color: black;
opacity: 0.6;
top: 60px;
display: block;
right: 20px;
height: 60px;
line-height: 20px;
border-radius: 3px;
padding: 5px 5px;
visibility: hidden;
transition-delay: .3s;
}
.account-menu p{
display: block;
}
.account:hover ~ .account-menu{
visibility: visible;
}
.account-menu .show-acc{
color: white;
font-size: 14px;
}
.fa-th.active{
background-color: #d6d6d6dd;
}
.fa-th.active:hover{
background-color: #d6d6d6dd;
}
.account{
width: 35px;
border-radius: 50%;
padding: 5px;
margin: 0 15px 0 0;
}
.account.active{
background-color: #d6d6d6dd;
}
.account.active:hover{
background-color: #d6d6d6dd;
}
.account:hover, .th:hover, .plus:hover{
background-color: rgb(243, 243, 243);
}
.side-menu{
display: flex;
position: fixed;
transform: translateX(-300px);
}
.side-menu *{
color: #4e4e4e;
}
.main-menu{
min-width: 300px;
background-color: #fff;
height: 100vh;
top: 0;
}
.up{
display: flex;
cursor: pointer;
}
.one{
padding: 18px 18px 20px 10px;
margin: 10px 5px 0 0;
background-color: #dcf2ff;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
}
.fa-home{
font-size: 20px;
margin: 0 0 0 10px;
}
.one li a p{
font-size: 14px;
font-weight: bold;
margin: 0 0 0 20px;
}
.two{
padding: 18px 18px 20px 10px;
margin: 0px 5px 10px 0;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
transition: none;
}
.two:hover{
background-color: #f7f7f7;
}
.fa-calendar{
font-size: 20px;
margin: 0 0 0 12px;
}
.two li a p{
font-size: 14px;
font-weight: bold;
margin: 0 0 0 23px;
}
.three{
padding: 18px 18px 20px 10px;
margin: 5px 5px 10px 0;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
transition: none;
}
.three:hover{
background-color: #f7f7f7;
}
.fa-cog{
font-size: 20px;
margin: 0 0 0 10px;
}
.three li a p{
font-size: 14px;
font-weight: bold;
margin: 0 0 0 23px;
}
.top-two{
border-bottom: 1px solid #ddd;
}
.question-mark{
width: 20px;
position: fixed;
bottom: 0;
margin: 0 0 20px 20px;
border-radius: 50%;
padding: 10px;
}
.question-mark:hover{
background-color: rgb(238, 238, 238);
}
.question-mark.active{
background-color: rgb(216, 216, 216);
}
.question-out{
background-color: #fff;
position: absolute;
bottom: 60px;
margin: 0 0 0 20px;
border-radius: 5px;
min-width: 250px;
box-shadow: 0 0 3px 1px rgb(204, 204, 204);
}
.question-out li:nth-child(1){
margin: 10px 0 0 0;
}
.question-out li:nth-child(4){
margin: 0 0 10px 0;
}
.question-out li{
padding: 7px 0 7px 10px;
font-size: 15px;
}
.question-out li:hover{
background-color: #dddddd;
}
@keyframes hello{
0%{
scale: 0;
transform: translateY(-30px);
}
100%{
scale: 10;
transform: translateY(0px);
}
}
@keyframes pop{
0%{
transform: translateY(30px);
}
100%{
transform: translateY(0px);
}
}
@media screen and (max-width: 480px){
#nine-dot, .account{
display: none;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Classes</title>
<link rel="icon" href="classroom.png">
<link rel="stylesheet" href="/Coding/Google Classroom/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/5c25faca78.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="nav_bar">
<div class="left">
<ul>
<li>
<a href="#">
<i class="fas fa-bars"></i>
</a>
</li>
<li>
<a href="#">
<svg class="google-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 92" width="90" height="25">
<path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
<path fill="#FBBC05" d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
<path fill="#4285F4" d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z"/>
<path fill="#34A853" d="M225 3v65h-9.5V3h9.5z"/>
<path fill="#EA4335" d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z"/>
<path fill="#4285F4" d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z"/>
</svg>
</a>
</li>
<li><a href="#"><p class="classroom">Classroom</p></a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a href="#">
<img class="plus" src="plus.png" alt="">
<p class="join">Create or join a class</p>
<ul class="plus-drop-down">
<li><a href="#">Join class</a></li>
<li><a href="#">Create class</a></li>
</ul>
</a>
</li>
<li>
<a href="#">
<i id="nine-dot" class="fas fa-th th"></i>
<p class="app">Google apps</p>
</a>
</li>
<li>
<a href="#">
<img class="account" src="account.png" alt="">
<div class="account-menu">
<p class="show-acc">Google Account</p>
<p class="username"></p>
<p class="email"></p>
</div>
</a>
</li>
</ul>
</div>
</nav>
</header>
<aside id="menu" class="side-menu">
<div class="main-menu">
<div class="top-two">
<div>
<ul class="up one">
<li>
<a href="#"><i class="fas fa-home"></i></a>
</li>
<li><a href="#">
<p>Classes</p></a>
</li>
</ul>
</div>
<div>
<ul class="up two">
<li>
<a href="#">
<i class="far fa-calendar"></i>
</a>
</li>
<li>
<a href="#">
<p>Calendar</p>
</a>
</li>
</ul>
</div>
</div>
<div>
<ul class="up three">
<li>
<a href="#">
<i class="fas fa-cog"></i>
</a>
</li>
<li>
<a href="#">
<p>Settings</p>
</a>
</li>
</ul>
</div>
</div>
<div>
<img class="question-mark" src="Question.png" alt="">
<ul class="question-out">
<li><a href="#">What's New</a></li>
<li><a href="#">Report issue or request feature</a></li>
<li><a href="#">Help Center</a></li>
<li><a href="#">Help Community</a></li>
</ul>
</div>
</aside>

<script src="/Coding/Google Classroom/script.js"></script>
</body>
</html>

在此处输入图像描述

Answer 1

你非常接近。尝试将background-attachment: fixed;添加到你的body css中，你应该会得到你想要的。

如果您想在这里了解更多信息，可以阅读background-attachment：https://www.w3schools.com/cssref/pr_background-attachment.asp

Answer 2

我根本听不懂你的代码，但我在谷歌应用程序脚本的showModalDialog中的一些文本居中时遇到了问题，CSS中心和中间等组合都不起作用，直到我最终偶然发现使用了父/子集。也许这对你有用。

<style> 
#parent { 
display:table;
font-family:Georgia, Cambria, serif;
font-size: 100%;
height: 100%;
margin: auto; 
padding: 0;
position: fixed;
text-align:center;
width: 100%;
}
#child {
display: table-cell;
padding: 55px 55px;
vertical-align: middle;
}