使div透明并显示背景图像

Question

我想以某种方式使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>

Answer 1

因为在引导程序中有身体background:#fff; ，您可以添加到正文背景：透明；

Answer 2

您的代码似乎正在运行（请参阅演示）-我在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>