CSS 背景位置居中

Question

如何将以下图像放在页面中央？ 我试过 background-position = center 但它出现在顶部底部。 帮助！

 $(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( 'ganyiming0609810@gmail.com' ).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 ap{ 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 ap{ 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 ap{ 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; 到你的身体 css，你应该得到你想要的。

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

Answer 2

我根本无法理解您的代码，但是我在将某些文本放在 Google App Script 的 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;
   }