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>

使div透明并显示背景图像

2 个答案: