透明背景色不起作用

Question

我在Bootstrap 4中遇到这个问题：我正在网页上工作，并且已经将CSS固定为背景。 我想将多个<div>一个接一个地放置在另一个之间，并在它们之间留有一定的透明空间，以便在这些透明空间中看到背景图像。 问题是，引导程序（我想）会使每种背景文本都变成白色，因此透明的东西不起作用。 我在CSS中创建了一个“ spazioVuoto”类，该类应使背景透明，但事实并非如此。 谁能帮我？

PS。 如果您想查看我正在谈论的示例，请访问http://it.diesel.com/it/

这是一个代码笔示例https://codepen.io/anon/pen/ooJqVK

这是我的代码

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

.spazioVuoto {
    background-color: transparent;
    padding: 5em;
}

Answer 1

这里的问题是您的身体具有背景色：#fff，因此即使spazioVuoto具有背景透明色，其颜色也仍会是白色。 尝试将其（spazioVuoto背景色）更改为红色，您会发现它会起作用。 因此，您必须将主体背景设置为透明，然后在其他容器上工作以设置其背景颜色。

html { 
  background: url("w3schools.com/w3css/img_fjords.jpg") 
  no-repeat center center fixed; 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover;
  background-size: cover;
} 
body {  
  background-color:transparent !important;
} 
.spazioVuoto { 
  background-color: transparent;
  padding: 5em; 
}
.container { 
  max-width: 100% !important;
  background-color: #fff;
  width: 100% !important;
  padding: 1% 20% !important;
}