Question

通过执行此操作，我已将网页的背景设置为图像

html {
    background: url("https://preview.ibb.co/dizdck/beach2.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

然后我创建了一个这样的div

<div class="container">hi</div>

问题是div有一个白色背景，我不想在页面上看到。我注意到这个白色背景仅在我使用bootstrap时出现。关于为什么会发生这种情况以及如何解决问题的任何想法？

以下是带有示例的代码集：https://codepen.io/bobnooby/pen/GExJmE

Answer 1

您想通过css上的body：

执行此操作

body {
  background-color: red !important; //set to color
  background-image: url("https://preview.ibb.co/dizdck/beach2.jpg") !important; //or set image
}

Answer 2

我通常希望尽可能避免使用!important属性。我的解决方案是将背景图像包含在与html和body样式属性相同的标签中。这消除了白色div bg颜色。

html body {
    background: url(../images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

如何删除Bootstrap引起的Div上的白色背景

2 个答案: