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

#1楼 票数:3 已采纳

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

#2楼 票数:1

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

  ask by Mindaugas Bernatavičius translate from so

未解决问题?本站智能推荐:

2回复

使div元素背景对背景图像CSS透明

我想在我的网站中制作视差效果,但是尽管使用background-color: transparent ,但我仍无法将DIV元素的背景设置为 background-color: transparent 。 本质上,我只想在DIV中显示文本,并删除背景色。 通过使用W3Schools。
3回复

如何使嵌套的div透明以显示body标签的背景图像? [重复]

这个问题已经在这里有了答案: 如何使用CSS为文本或图像提供透明背景? 28个答案 我在容器div中有一个div。 现在,我想使最里面的divs半透明以显示物体的背景图像。 还是可以做到这一点? 为了使我的问题更清楚,我为要定位的div使用了绿色边框。
1回复

如何使背景图像上方的透明背景颜色显示在底部?

好吧,我的问题是,我在图像背景上有一个半透明的背景色。 但是当计算机屏幕变大并且页面垂直变长然后水平时,背景颜色在内容结束后停止。 示例: 页面结束前的background-color end 。 我到处寻找并尝试了所有(高度:100%;高度:100vh;底部:0;边距:0;等等)。
2回复

使 HTML 正文背景图像透明

我试图使我的背景图像透明,而页面的其余部分不透明,例如在非褪色 HTML 和 CSS 顶部的褪色背景图像。 我有一个 HTML 页面,使用 div 将图像作为背景。 以下是页面的简化版本: 我在以下问题中找到了这个设置: 如何在不使内容(图像和文本)也透明的情况下使我网站的背景透明?
2回复

div仅显示在背景图像上

在这个网站-UggerhøjImprovement上 ,我希望右下角的小div(表示Fotograf:Erik Refner的那个 )仅出现在背景图像上。 当我向下滚动并经过图像到达黑色背景时,文本应在背景后面消失。 我已经尝试过z-index: -1但不确定如何正确使用z-index。
2回复

显示背景图案的 CSS 透明背景图像 [关闭]

关闭。 此问题不可重现或由拼写错误引起。 它目前不接受答案。
2回复

div中的背景图片使div透明

我试图让一个div拥有自己的背景图像,但是每次添加该图像时,它都会使div透明,以便显示出主要背景。 我搜寻了这个网站和其他网站,但都无济于事。
1回复

如何使vue.js组件中的div框的背景图像透明?

我想使以下vue.js组件具有透明的背景图像。 我无法在样式表中使用动态背景图片属性,因此我不得不绑定到div框中的style属性。 的B / C我不能让我的背景图像是透明的。 任何帮助深表感谢。