मेरे पास दो दो कंटेनर हैं, एक नेविगेशन बार और उसके नीचे हीरो। मैंने केवल नायक के लिए पृष्ठभूमि-छवि सेट की है और मेरे पास नेविगेशन बार के लिए कोई पृष्ठभूमि-छवि सेट नहीं है। हालांकि, नेविगेशन बार की पृष्ठभूमि स्वचालित रूप से नायक के समान ही सेट होती प्रतीत होती है।यहां छवि विवरण दर्ज करें

मेरे सीएसएस का हिस्सा नीचे जैसा दिखता है:

 .Nav {
  height: 55px;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  z-index: 100;
  position: fixed;
  width: 100%;
  opacity: 0.8;
  }

  .HeroWrapper{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  background-image: url("images/pencil.jpg");
  background-size: 100px;
  }

और मेरी एचटीएमएल की तरह है:

<div class = "Nav"></div>
<div class = "HeroWrapper"></div>
1
penny 18 मार्च 2021, 23:08

1 उत्तर

सबसे बढ़िया उत्तर

ऐसा आपके दोनों डिव (fixed और relative) के position मानों के कारण हो रहा है।

ऐसा लगता है कि .Nav की पृष्ठभूमि डिफ़ॉल्ट रूप से पारदर्शी है। यदि आप नहीं चाहते कि .Nav में यह पृष्ठभूमि हो, तो आप बस एक और निर्दिष्ट कर सकते हैं जैसे background: white;

.Nav {
  height: 55px;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  z-index: 100;
  position: fixed;
  width: 100%;
  opacity: 0.8;
    background: white
  }
2
robbieAreBest 19 मार्च 2021, 20:20