Cuba tambah imej latar belakang dalam html dan css di belakang bar navigasi supaya ruang tidak muncul semasa menatal-Soal Jawab Rangkaian PHP Cina

Saya tidak tahu bagaimana untuk mengisi imej latar belakang di bawah navbar dan pengaki dalam html dan css. Apabila saya menatal bar navigasi ruang hanya ruang kosong, saya mahu ia menatal tanpa ruang di bahagian atas dan bawah. Terima kasih!

* { 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

Saya cuba menukar kod pada css dan html tetapi nampaknya tiada apa yang mengubah keputusan.

* { 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; }

membalas semua (2)

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

Dalam ulasan saya kepada soalan anda, saya mencadangkan untuk mengalihkan imej latar belakangbody，但我无法想象您将如何以这种方式应用不透明度。因此，只需将

ke bahagian atas halaman.

Suka+0

Tambah Balasan

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

Saya tidak tahu mengapa anda mencipta elemen baharu untuk meletakkan imej BG dan bukannya hanya meletakkannya pada saiz标签上，但你的问题是因为在小屏幕上您在.background-container元素上设置height:auto.

Anda telah mencipta elemen, menetapkan kedudukannya dan kemudian menetapkannya kepada 100% tinggi dan 100% lebar. Apabila saiz skrin lebih kecil dan anda tetapkanheight:auto时，该元素的高度为0pxkerana tiada apa-apa di dalam elemen.