引導程序3上的模糊背景圖像

我剛開始開發我的第一個Bootstrap驅動程序設計，但我在如何創建模糊的背景圖像上掙扎。引導程序3上的模糊背景圖像

這裏是我的代碼：

body { 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 

 
    } 
 

 
    body::before{ 
 
    background: url(/scnet/includes/images/bg.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
    }

<body> 
 
\t <div class="container"> 
 

 
     <form class="form-signin"> 
 
     <h2 class="form-signin-heading">Please sign in</h2> 
 
     <label for="inputEmail" class="sr-only">Email address</label> 
 
     <input type="text" id="inputUser" class="form-control" placeholder="User ID" data-toggle="tooltip" title="tooltip on second input!" name="secondname" required autofocus> 
 
\t \t <label for="inputPassword" class="sr-only">Memorable Data</label> 
 
     <input type="password" id="inputMem" class="form-control" placeholder="Memorable Data" required> 
 
     <label for="inputPassword" class="sr-only">Password</label> 
 
     <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> 
 
     <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button><button class="btn btn-lg btn-primary btn-block" type="submit">Password Reset</button> 
 
     </form> 
 
\t <script type="text/javascript"> 
 
\t \t $('input[type=text][id=inputEmail]').tooltip({ /*or use any other selector, class, ID*/ 
 
\t \t \t placement: "right", 
 
\t \t \t trigger: "focus" 
 
\t \t }); 
 
\t </script> 
 
    </div> <!-- /container --> 
 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="includes/js/bootstrap.min.js"></script> 
 
    </body>

目前沒有任何反應（背景保持白色） - 我知道圖像的參考是正確的，因爲我試圖把它添加到body類，它加載的罰款。

任何想法我做錯了什麼？

來源

2015-04-27 Dave Burns

嘗試：（以上包括@閣樓的建議）

body { 
    padding-top: 40px; 
    padding-bottom: 40px; 
    position: relative; 
} 

body::before { 
    background: url(/scnet/includes/images/bg.jpg) no-repeat center center fixed; 
    content: ''; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
    position:absolute; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}

來源

2015-04-27 14:24:43 Garrett

這只是一個跨屏幕頂部的40px高度的圖像線並且推下登錄框，應該更多地解釋它是一個覆蓋整個屏幕的響應背景，因此顯示爲塊並添加高度使得' -webkit-background-size：cover;'冗餘。 –

請參閱我編輯的答案。我假設你有一個特別的原因，希望在:: before僞元素而不是'body'背景圖像。 – Garrett

謝謝，我對該代碼進行了一些編輯並使其工作，謝謝:) –

自舉，有一個整體的多種方法可以解決這個不知道所有的自定義的CSS（如果有的話），這是很難確切地知道什麼你在之後，但是作爲替代方案，請看Bootply上的這段代碼片段。

來源

2015-04-27 14:36:08 Jasper33

引導程序3上的模糊背景圖像

回答

相關問題