css - 我应该如何使我 body 的整个背景变暗?

标签 css

* {
  margin: 0;
  padding: 0;
}

html,
body {
  box-sizing: border-box;
  height: 100%;
}

.wrapper-overlay {
  background: rgba(72, 70, 82, 0.5);
}

body {
  color: white;
  min-height: 100%;
  min-width: 100%;
  background: url("images/friends.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}
<html>
<wrapper-overlay>

  <body>
  </body>
</wrapper-overlay>

</html>

我制作的背景是其父元素的 100%,但是 background:rgba 不会使背景的底部变暗。我尝试将背景放在 html css 中,但它也不起作用。

最佳答案

我了解到您想对整个页面应用深色背景。 看起来你应该使用 min-height 属性。这是使用的基本逻辑:

<style>
    html,body{
        height:100%;
        min-height:100%;
    }
    body{
        background:rgba(72, 70, 82, 0.5);
    }
</style>

<html>
    <body>
    </body>
</html> 

关于css - 我应该如何使我 body 的整个背景变暗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54856147/

相关文章:

javascript - 动画显示 block /无,具有相应的功能

javascript - Chart.js Canvas chop donut 描边

css - 与 PrimeNg 模块一起使用时,FontAwesome 图标不显示

html - 如何在我的页面中创建 4 个修复 block

javascript - 使用标签而不是 anchor 文本

ios - 响应式网站在 Firefox 响应模式下运行良好,但在 Chrome 或设备中运行不佳

javascript - Javascript 中的 iPhone slider - Safari 中的问题

html - 重新安排移动和桌面的 flex 元素

javascript - 获取 slideToggle 以展开和显示隐藏内容

html - 如何将bootstrap下拉菜单添加到wordpress