时间戳

首页 > 解决方案 > 有色背景图像不适用于 Bootstrap

html - 有色背景图像不适用于 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">

标签： htmlcssbootstrap-4

解决方案

按照此链接中给出的示例-> 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;
}

推荐阅读