Essayez d'ajouter une image d'arrière-plan dans le HTML et le CSS derrière la barre de navigation afin que l'espace n'apparaisse pas lors du défilement-Questions et réponses sur le réseau chinois PHP

Je ne sais pas comment remplir l'image d'arrière-plan sous la barre de navigation et le pied de page en HTML et CSS. Lorsque je fais défiler la barre de navigation, l'espace n'est qu'un espace vide, je veux qu'il défile sans espace en haut et en bas. Merci!

* { box-sizing: border-box; } body, html { margin: 0 auto; padding: 0; } .background-container { background-image: url("http://placekitten.com/g/500/500"); background-size: cover; background-position: center; position: fixed; width: 100%; height: 100%; opacity: 0.5; z-index: -1; background-repeat: no-repeat; } .logo-container { display: flex; justify-content: center; align-items: center; height: 30%; /* Adjust the height as needed */ } .logo-container img{ max-width: auto; max-height: 600px; text-align: center; } @media screen and (max-width: 768px) { /* Adjust background image for mobile devices */ .background-container { background-position: center; height: auto; } } .footer { padding: 25px 0; background-color: #f2f2f2; bottom: 0; width: 100%; } .navbar { margin-bottom: 0; border-radius: 0; margin: 0; padding: 0; width: 100%; overflow: auto; } @media (max-width: 768px) { .logo-container { margin-top: 50px; } .footer { position: relative; } .navbar { position: relative; }

    The Backyard     Home 
  About 
  Events 
  Contact 
 
 
 
 
   
   The Backyard
 at Boca Fiesta & Palomino
 232 1/2 SE 1st st.
 Gainesville, FL 32601

J'ai essayé de changer le code sur le CSS et le HTML mais rien ne semble changer les résultats.

* { box-sizing: border-box; } body, html { margin: 0 auto; padding: 0; } .background-container { background-image: url("http://placekitten.com/g/500/500"); background-size: cover; background-position: center; position: fixed; width: 100%; height: 100%; opacity: 0.5; z-index: -1; background-repeat: no-repeat; } .logo-container { display: flex; justify-content: center; align-items: center; height: 30%; /* Adjust the height as needed */ } .logo-container img{ max-width: auto; max-height: 600px; text-align: center; } @media screen and (max-width: 768px) { /* Adjust background image for mobile devices */ .background-container { background-position: center; height: auto; } } .footer { padding: 25px 0; background-color: #f2f2f2; bottom: 0; width: 100%; } .navbar { margin-bottom: 0; border-radius: 0; margin: 0; padding: 0; width: 100%; overflow: auto; } @media (max-width: 768px) { .logo-container { margin-top: 50px; } .footer { position: relative; } .navbar { position: relative; }

* { box-sizing: border-box; } body, html { margin: 0 auto; padding: 0; } .background-container { background-image: url("http://placekitten.com/g/500/500"); background-size: cover; background-position: center; position: fixed; width: 100%; height: 100%; opacity: 0.5; z-index: -1; background-repeat: no-repeat; } .logo-container { display: flex; justify-content: center; align-items: center; height: 30%; /* Adjust the height as needed */ } .logo-container img{ max-width: auto; max-height: 600px; text-align: center; } @media screen and (max-width: 768px) { /* Adjust background image for mobile devices */ .background-container { background-position: center; /*height: auto;*/ /* <======= REMOVE THIS */ } } .footer { padding: 25px 0; background-color: #f2f2f2; bottom: 0; width: 100%; } .navbar { margin-bottom: 0; border-radius: 0; margin: 0; padding: 0; width: 100%; overflow: auto; } @media (max-width: 768px) { .logo-container { margin-top: 50px; } .footer { position: relative; } .navbar { position: relative; }

répondre à tous (2)

P粉1619397522023-09-11 00:57:37 2 plancher

J'ai suggéré dans mon commentaire à votre question d'appliquer l'image d'arrière-planbody，但我无法想象您将如何以这种方式应用不透明度。因此，只需将

de la déplacer simplement en haut de la page.

Comme+0

Ajouter une réponse

P粉5628459412023-09-11 00:55:31 1 plancher

Je ne sais pas pourquoi vous avez créé un nouvel élément pour placer l'image BG au lieu de simplement la placer à la taille标签上，但你的问题是因为在小屏幕上您在.background-container元素上设置height:auto.

Vous avez créé un élément, fixé sa position, puis l'avez défini à 100 % de hauteur et 100 % de largeur. Lorsque la taille de l'écran est plus petite et que vous définissezheight:auto时，该元素的高度为0pxcar il n'y a rien à l'intérieur de l'élément.