html - 在背景图像上重叠文本

Question

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

可以看例子with Bootstrap here和 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

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

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

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

这将覆盖加载的 Bootstrap css。

在这里查看我对你的 fiddle 的更新:http://jsfiddle.net/1Ldykff2/2/