मेरे पास नायक पृष्ठभूमि छवि के लिए यह सीएसएस है:

#main > header {
  padding: 12em 0 10em 0 ;
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
  background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
  background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

क्या इसे एक लाइन स्टाइलिंग परिदृश्य में बदलना संभव होगा?

यह मेरा एचटीएमएल है:

<header id="header" class="alt">
  <h1><a href="index.html">Spectral</a></h1>
  <nav id="nav">
    <ul>
      <li class="special">
        <a href="#menu" class="menuToggle"><span>Menu</span></a>
        <div id="menu">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="generic.html">Generic</a></li>
            <li><a href="elements.html">Elements</a></li>
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Log In</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</header>

मुझे ऐसा करने का कारण यह है कि मैं एक स्थिर HTML साइट को एक सीएमएस में परिवर्तित कर रहा हूं और छवियों को प्रबंधित करने के लिए मुझे कुछ टैग जोड़ने की आवश्यकता है। इसके साथ सभी उत्तरों और दिशा के लिए धन्यवाद ...

0
Henry 22 नवम्बर 2021, 08:18
यह भी एक उपाय है। हालाँकि, इसके साथ कोड को पढ़ना या प्रबंधित करना कठिन लगता है। क्योंकि मुझे लगता है कि कुछ सीएमएस गतिशील कोड के साथ सभी छवि लिंक को प्रतिस्थापित करने की आवश्यकता है। मेरे विचार से उस दृष्टिकोण के लिए बेहतर है।
 – 
Feroz
22 नवम्बर 2021, 08:54

2 जवाब

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

नीचे की तरह इनलाइन-शैली का उपयोग करने का प्रयास करें, आप अपनी छवि पथ को आसानी से गतिशील में बदल सकते हैं

header {
  padding: 12em 0 10em 0 ;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
<header id="header" class="alt" style='background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://thumbs.dreamstime.com/b/yellow-crash-test-dummy-yellow-crash-test-dummy-car-seat-116968697.jpg");
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://thumbs.dreamstime.com/b/yellow-crash-test-dummy-yellow-crash-test-dummy-car-seat-116968697.jpg");
  background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://thumbs.dreamstime.com/b/yellow-crash-test-dummy-yellow-crash-test-dummy-car-seat-116968697.jpg");
  background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://thumbs.dreamstime.com/b/yellow-crash-test-dummy-yellow-crash-test-dummy-car-seat-116968697.jpg");'>
  <h1><a href="index.html">Spectral</a></h1>
  <nav id="nav">
    <ul>
      <li class="special">
        <a href="#menu" class="menuToggle"><span>Menu</span></a>
        <div id="menu">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="generic.html">Generic</a></li>
            <li><a href="elements.html">Elements</a></li>
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Log In</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</header> 

मुझे बताएं कि क्या कोई अन्य समस्या है।

1
Aman 22 नवम्बर 2021, 08:50
धन्यवाद - यह ऐसा करने का "सबसे आसान" तरीका और शायद सबसे समझदार जैसा दिखता है? धन्यवाद!
 – 
henry
22 नवम्बर 2021, 08:52
अगर ठीक है, तो अपवोट करें और उत्तर के रूप में स्वीकार करें - धन्यवाद
 – 
Aman
22 नवम्बर 2021, 08:56

मेरे दृष्टिकोण की जाँच करें। इस तरह आप छवियों को सीएमएस से लिंक कर सकते हैं। आप html के पहले या बाद में स्टाइल टैग का उपयोग कर सकते हैं।

<style>
#main > header {
    padding: 12em 0 10em 0 ;
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
    background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}
</style>
<header id="header" class="alt">
    <h1><a href="index.html">Spectral</a></h1>
    <nav id="nav">
        <ul>
            <li class="special">
                <a href="#menu" class="menuToggle"><span>Menu</span></a>
                <div id="menu">
                    <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="generic.html">Generic</a></li>
                    <li><a href="elements.html">Elements</a></li>
                    <li><a href="#">Sign Up</a></li>
                    <li><a href="#">Log In</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</header>
1
Feroz 22 नवम्बर 2021, 08:51