在背景图像上重叠文本

Question

我正在使用 Bootstrap，我想要一张背景图片，上面有一些文字、图片或其他内容。问题是 Bootstrap CSS 显示具有某种背景的元素，当然会破坏结果。

你可以看例子with Bootstrap here and without bootstrap here。

如何删除 bootstrap 使用的默认背景？

密码是：

HTML

<center><div>
    <h1>This is a test</h1>
</div></center>

CSS

html { 
    width: 100%;
    height: 100%;
  background: url('http://static.panoramio.com/photos/original/24446619.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: opacity(0.9);
    -webkit-filter: opacity(0.9);
    -moz-filter: opacity(0.9);
  -o-filter: opacity(0.9);
}

Answer 1

你的 html 的 body 上有一个 css 规则 bootstrap 给出 background-color: #fff;

在你自己的CSS中，你可以把

body {
    background-color: none;
}

这将覆盖 bootstrap 的代码。

Answer 2

尝试将背景颜色设置为 transparent。（您可以使用 none，但我发现它有时会很麻烦。不太清楚为什么。）

Fiddle: http://jsfiddle.net/1Ldykff2/3/

body {
   background: transparent;
}

Answer 3

Bootstrap 在代码 body { background-color: #fff; } 的前几行中如下设置 body 的 css 。我对此的建议是进入您的 bootstrap.css 文件并删除 css.

如果您使用的是 cdn，您可以在 <link> 之后添加以下内容到 bootstrap css:

<style>
  body { background-color: inherit; }
</style>

这将覆盖 bootstrap css 加载。

在此处查看我对您的 fiddle 的更新：http://jsfiddle.net/1Ldykff2/2/

在背景图像上重叠文本

Overlapping text over background image

html

css

overlay

twitter-bootstrap-3