html - 有色背景图像不适用于 Bootstrap

标签 html css bootstrap-4

我在 body 背景图像中添加了黑色透明渐变,但是当我将 Bootstrap 添加到 html 文件时,它停止工作。

body {
    background: 
      linear-gradient(
        rgba(0, 0, 0, 0.5), 
        rgba(0, 0, 0, 0.5)
      ),
      url("https://picsum.photos/id/1000/800/800");
      background-size: cover;
  }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

最佳答案

按照此链接中给出的示例 -> https://mdbootstrap.com/docs/jquery/css/background-image/

HTML

<body>

<div class="bg"></div>

<p class="py-5 text-center">This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

CSS

body, html {
  height: 100%;
}
.bg {
  /* The image used */
  background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

关于html - 有色背景图像不适用于 Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57532500/

相关文章:

javascript - 在图表边缘之外显示 Highcharts series.name

image - Bootstrap 4 在导航栏中对齐 img 和文本

bootstrap-4 - 为什么在 bootstrap 4 中去掉了字形图标

javascript - 没有 tbody 和 th block 的 jquery tablesorter 用法

Javascript 空输入错误

jquery - 使用 jquery 从下拉列表检索值到文本框

html - 根据 navbar html 调整按钮的高度

javascript - 使图像不受 iPad 网页上页面缩放的影响

css - 由复选框触发的可折叠动画

javascript - 如何在悬停时更改卡片内字体很棒的图标的颜色?