css - 透明背景颜色不起作用

Question

我在使用 bootstrap 4 时遇到了这个问题:我正在处理一个网页，我已经用 css 放置了一个固定的背景。我想放多个 <div>一个在另一个下面，它们之间有一些透明空间，以便在这些透明空间中看到背景图像的碎片。问题是 Bootstrap (我猜)使每种背景文本都变成白色，因此透明的东西不起作用。我在 css 中创建了一个“spazioVuoto”类，它应该使背景透明，但事实并非如此。谁能帮帮我？

附言。如果你想看我所说的例子，看看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

这里的问题是你的 body 有一个 backgournd-color:#fff，所以即使 spazioVuoto 有透明的背景，颜色仍然是白色的。尝试将它 (spazioVuoto background-color) 更改为红色，您会发现它会起作用。所以你必须将主体背景设置为透明，然后在其他容器上设置它们的背景颜色。

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;
}