सीएसएस बूटस्ट्रैप नेविबार पारदर्शी बनाने के लिए

Question

मैं बूटस्ट्रैप का उपयोग करता हूं और मेरे एचटीएमएल फाइल में एक नेविबार है, मैं पृष्ठभूमि छवि दिखाने के लिए यह एनवी बार पारदर्शी बनाना चाहता हूं। क्या कोई मुझे सिखा सकता है कि सीएसएस के साथ ऐसा कैसे करें? मैंने निम्नलिखित सीएसएस को खुश करने की कोशिश की

.navbar-inner { 
    background-color:transparent; 
} 

<div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="navbar-inner"> 
        <div class="container"> 
         <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <a class="brand" href="#">lol</a> 
         <div class="nav-collapse collapse"> 
          <ul class="nav pull-right"> 
           <li class="active"><a href="/">Home</a></li> 
           <li><a href="about">About</a></li> 
          </ul> 
         </div> 
        </div> 
      </div> 
     </div> 

Answer 1

मैं एक नया .transparent जोड़कर नेविगेशन पट्टी पारदर्शी बनाने के लिए कर रहा था कक्षा में .navbar और सीएसएस को इस तरह सेट करना:

.navbar.transparent.navbar-inverse .navbar-inner { 
    border-width: 0px; 
    -webkit-box-shadow: 0px 0px; 
    box-shadow: 0px 0px; 
    background-color: rgba(0,0,0,0.0); 
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop(0% , rgba(0,0,0,0.00)),color-stop(100% , rgba(0,0,0,0.00))); 
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); 
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%); 
} 

मेरा मार्कअप इस तरह है

<div class="navbar transparent navbar-inverse"> 
      <div class="navbar-inner">.... 

Answer 2

background-image: none के साथ परीक्षण करें। वह संपत्ति linear-gradient को हटा देगी।

आप परिणाम देख सकते हैं: http://jsfiddle.net/eugip9/8D36M/

Answer 3

बस अपने सीएसएस से जोड़ें: -

.navbar-inner { 
    background:transparent; 
} 

Answer 4

आप जो लोग कर रहे हैं वह अनावश्यक है।

पारदर्शी पृष्ठभूमि के लिए, बस कार्य करें:

<div class="navbar"> 
 
// your navbar content 
 
</div>

बिना कक्षा नेवबार-डिफ़ॉल्ट या नेवबार-उलटा।

Answer 5

आप बूटस्ट्रैप और रूबी ऑन रेल्स के नवीनतम संस्करण का उपयोग कर रहे हैं, तो आप बस इसे html.erb फ़ाइल में इतनी के रूप में लिख सकते हैं:

<nav class="navbar navbar-transparent"> 

और वह सभी की जरूरत है।

Answer 6

जोकेम स्टोयल के उत्तर के आगे ... मैंने डीवी टैग की कक्षा में 'navbar-fixed-top' जोड़ा और यह काम किया।

Answer 7

बूटस्ट्रैप के साथ निर्मित डिफ़ॉल्ट नेविबार बस ठीक काम करता है।
आपको बस कस्टम सीएसएस को जोड़ने की जरूरत है, इस तरह सबकुछ अभी भी काम करता है जैसा कि इसे करना चाहिए।

HTML:

<nav class="navbar navbar-default"> 

सीएसएस:

.navbar-default { 
    background-color: transparent; 
} 

Answer 8

<nav class="navbar navbar-fixed-top navbar-light" style="background-color: transparent;"> 

<!--This should work just fine. it will make it transparent. hope i helped!--> 

Answer 9

सीएसएस कोड:

.header .navbar-default { 
    background: none; 
} 

एचटीएमएल कोड:

<header> 
    <nav class="navbar navbar-default"></nav> 
</header> 

Answer 10

इस गड़बड़ी की कोई आवश्यकता नहीं है।

आप navbar-default या navbar-inverse

<nav class="navbar"> //Don't add navbar-default to the class 

    // 

</nav> 

Answer 11

अपने कोड में यह प्रयास करें नहीं लिख द्वारा नेवबार पारदर्शी बना सकते हैं, यह मेरे लिए काम किया -

तत्व को एक आईडी देना , जिसमें आप पारदर्शी

उदाहरण के लिए अपने कोड के अनुसार बनाना चाहते हैं -

<div class="navbar-inner" id="nav1"> 

फिर अपने css-

#nav1 
{ 
    background-color:#F00; /*whichever you want*/ 
    opacity: 0.5;   /*0.5 determines transparency value*/ 
    filter:(opacity=50);  
} 

Answer 12

बूटस्ट्रैप 3.3.7 में (और 4.0 शायद) में यह लागू होते हैं, यह काम करता है:

के बजाय:

<nav class="navbar navbar-inverse navbar-fixed-top"> 

उपयोग :

<nav class="navbar bg-transparent navbar-fixed-top"> 

कोई सीएसएस आवश्यक नहीं है!