Question

我正在使用Bootstrap，我希望有一个背景图像，并在其上面显示一些文字，图像或其他内容。问题是Bootstrap CSS显示具有某种背景的元素，当然，这会破坏结果。

您可以看到示例with Bootstrap here和without bootstrap here。

如何删除此默认后台引导程序使用？

代码是：

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 { background-color: #fff; }的前几行中按如下方式设置body的css。我的建议是进入你的bootstrap.css文件并删除那个css。

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

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

这将覆盖加载的bootstrap css。

请在此处查看我对小提琴的更新：http://jsfiddle.net/1Ldykff2/2/

Answer 2

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

小提琴：http://jsfiddle.net/1Ldykff2/3/

body {
   background: transparent;
}

Answer 3

你的html的body有一个css规则，即background-color: #fff;

引导程序

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

body {
    background-color: none;
}

这将覆盖bootstrap的代码。

在背景图像的重叠文本

3 个答案: