सीएसएस दो हेडर के बीच संक्रमण को कैसे सुचारू करें

Question 1

मेरे पास एक प्रोजेक्ट है जिसमें हेडर है। इस हेडर में एक निश्चित पृष्ठभूमि का रंग और टेक्स्ट का रंग होता है। ये रंग वेबसाइट के एक हिस्से के साथ ठीक नहीं चल रहे हैं। इसलिए मैं हेडर को अलग-अलग रंगों में बदलना चाहता हूं। लेकिन मैं चाहता हूं कि सीमा पर रंग धीरे-धीरे बदलें और तुरंत अदला-बदली न करें।

प्रवेश करते और छोड़ते समय हेडर को कंटेनर की सीमा पर एक रंग से दूसरे रंग में संक्रमण करना चाहिए। लेकिन मुझे यह काम करने के लिए प्रतीत नहीं होता है।

enter image description here

body {
  height: 300rem;
  margin: 0;
  padding: 0;
}

#main-container {
  width: 100%;
  height: 100%;
  background-color: red;
}

#header {
  width: 100%;
  height: 2rem;
  background-color: blue;
  position: sticky;
  top: 0;
}

#someDiv {
  position: relative;
  width: 100%;
  height: 20rem;
  background-color: purple;
  margin-top: 30rem;
}

#headerSomeDiv {
  width: 100%;
  height: 2rem;
  background-color: green;
  color: white;
  position: sticky;
  top: 0;
}

<body>
    <div id="main-container">
        <div id="header">
            <h1>HEADER</h1>
        </div>
        <div id="someDiv">
            <div id="headerSomeDiv">
                <h1>HEADER</h1>
            </div>
        </div>
    </div>
</body>

html css sticky

0

Stephen 7 जिंदा 2021, 22:01

आपको अस्पष्टता या रंग के साथ सीएसएस संक्रमण का उपयोग करने की आवश्यकता है ... या आप और क्या चाहते हैं

–

herosuper

7 जिंदा 2021, 22:06

w3schools.com/css/tryit.asp?filename=trycss3_transition1

–

herosuper

7 जिंदा 2021, 22:07

सही है, आपको संक्रमण का उपयोग करने की आवश्यकता है। वास्तव में, आपने अपनी टिप्पणी में जो उदाहरण साझा किया है वह इस गुण का उपयोग करता है: transition: width 2s;

–

Periplo

8 जिंदा 2021, 03:26

लेकिन मैं ऊंचाई, अस्पष्टता या रंग का उपयोग करके प्रत्येक div का एक हिस्सा कैसे काट सकता हूं? मेरा मतलब है कि अगर मैं ऊंचाई का उपयोग करता हूं और उस संक्रमण को करता हूं तो div के अंदर के शब्द अभी भी दिखाई देंगे। मुझे यह नहीं मिलता कि संक्रमणों का उपयोग करके यह काम कैसे किया जाए।

–

Stephen

8 जिंदा 2021, 11:25

Answer

position:fixed यह कर सकते हैं

body {
  height: 300rem;
  margin: 0;
}

#main-container {
  height: 100%;
  background-color: red;
  clip-path:inset(0); /* to clip the position:fixed to its container */
  overflow:auto;
}

#header,
#headerSomeDiv{
  width: 100%;
  height: 2rem;
  background-color: blue;
  position: fixed;
  top: 0;
}

#headerSomeDiv {
  background-color: green;
  color: white;
}
h1 {
  margin:0;
}
#someDiv {
  position: relative;
  height: 20rem;
  background-color: purple;
  margin-top: 30rem;
  clip-path:inset(0); /* to clip the position:fixed to its container */
}

<body>
  <div id="main-container">
    <div id="header">
      <h1>HEADER</h1>
    </div>
    <div id="someDiv">
      <div id="headerSomeDiv">
        <h1>HEADER</h1>
      </div>
    </div>
  </div>
</body>

2

Temani Afif 10 जिंदा 2021, 11:58

धन्यवाद, इससे मेरी समस्या ठीक हो गई! इनाम 22 घंटे में दिया जा सकता है

–

Stephen

10 जिंदा 2021, 12:27

Question 2

position:fixed यह कर सकते हैं

body {
  height: 300rem;
  margin: 0;
}

#main-container {
  height: 100%;
  background-color: red;
  clip-path:inset(0); /* to clip the position:fixed to its container */
  overflow:auto;
}

#header,
#headerSomeDiv{
  width: 100%;
  height: 2rem;
  background-color: blue;
  position: fixed;
  top: 0;
}

#headerSomeDiv {
  background-color: green;
  color: white;
}
h1 {
  margin:0;
}
#someDiv {
  position: relative;
  height: 20rem;
  background-color: purple;
  margin-top: 30rem;
  clip-path:inset(0); /* to clip the position:fixed to its container */
}

<body>
  <div id="main-container">
    <div id="header">
      <h1>HEADER</h1>
    </div>
    <div id="someDiv">
      <div id="headerSomeDiv">
        <h1>HEADER</h1>
      </div>
    </div>
  </div>
</body>

2

Temani Afif 10 जिंदा 2021, 11:58

धन्यवाद, इससे मेरी समस्या ठीक हो गई! इनाम 22 घंटे में दिया जा सकता है

–

Stephen

10 जिंदा 2021, 12:27

सीएसएस दो हेडर के बीच संक्रमण को कैसे सुचारू करें

1 उत्तर

संबंधित सवाल

नए सवाल