Question

我在bootstrap 4中遇到了这个问题：我正在网页上工作，并且我已经用css设置了一个固定的背景。我想将多个<div>放在另一个之间，在它们之间有一些透明空间，以便在这些透明空间中看到背景图像的碎片。问题是bootstrap（我猜）使每种背景文本都是白色的，所以透明的东西不起作用。我创建了一个＆＃34; spazioVuoto＆＃34; css中的类应该使背景透明，但它没有。任何人都可以帮助我吗？

PS。如果你想看一个我正在谈论的例子，请看http://it.diesel.com/it/

这是一个codepen示例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

这里的问题是你的身体有一个backgournd颜色：#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;
}

透明背景颜色不起作用

1 个答案: