使一個div透明，並顯示背景圖片

我想使div透明的方式，通過它可以看到背景圖像。所有在線教程似乎都有效，但似乎我錯過了重要項目中的一些細節。使一個div透明，並顯示背景圖片

CSS：

html { 
    background: url('../images/background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

div.container-fluid{ 
    /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   */ 
    /*filter: alpha(opacity=0); */ 
    /*-moz-opacity: 0.0;   */ 
    /*-khtml-opacity: 0.0;   */ 
    /*opacity: 0.0;    */ 
    /*background: rgba(255,255,255,0);*/ 
    background-color: transparent !important; 
    color: #ffffff; 
    opacity: 0.2; 
}

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>M</title> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content="Cue"/> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" /> 
</head> 

<body> 
    <div class="container-fluid"> 
     <div class="header"> 
      <a href="" class="header-text">M</a> 
      <h1>M</h1> 
     </div> 
     <div class="content"> 
      <main> 

      </main> 
     </div> 
    </div> 
</body> 
</html>

來源

2015-03-30 Mindaugas Bernatavičius

您的代碼正在爲我工作。你能更具體地說明什麼不起作用嗎？ – Matt 2015-03-30 21:10:17

因爲在引導有身體background:#fff;，您可以添加到身體的背景：透明;

來源

2015-03-30 21:08:05

確實如此 - 似乎並不直觀。爲什麼這樣做？ :) – 2015-03-30 21:31:09

如果你將背景與圖像的身體或一些div，而不是HTML，將會更好。 – 2015-03-31 07:22:09

是的，我也這麼做:)謝謝 – 2015-03-31 11:24:31

您的代碼似乎是工作（見演示） - 我加了一個紅色邊框的H1參考。也許我誤解了你的問題？

Bootstrap具有自己的背景顏色設置。如果您打算使用它，您可能需要覆蓋這些內容。

html { 
 
    background: url('http://placekitten.com/g/500/500') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
div.container-fluid{ 
 
    /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   */ 
 
    /*filter: alpha(opacity=0); */ 
 
    /*-moz-opacity: 0.0;   */ 
 
    /*-khtml-opacity: 0.0;   */ 
 
    /*opacity: 0.0;    */ 
 
    /*background: rgba(255,255,255,0);*/ 
 
    background-color: transparent !important; 
 
    color: #fff; 
 
    opacity: 0.5; 
 
    border: 3px solid red; 
 
}

<div class="container-fluid"> 
 
     <div class="header"> 
 
      <a href="" class="header-text">M</a> 
 
      <h1>M</h1> 
 
     </div> 
 
     <div class="content"> 
 
      <main> 
 

 
      </main> 
 
     </div> 
 
    </div>

來源

2015-03-30 21:06:35 ochi

使一個div透明，並顯示背景圖片

回答

相關問題