Question

首先，我绝对是Bootstrap 4的初学者，并且实际上正在构建一个要培训的网站。

我想创建一个带有黑色背景和浅色文本的标题，以及一个带有浅色文本和图像作为背景的横幅。

我的问题是背景没有改变，并且在CSS和HMTL中也找不到错误。

附上两个摘要，希望有人能帮助我。

非常感谢！

最好！

HTML：

<body>

  <!-- header -->
  <header>

   <!-- navbar -->
   <!-- end navbar -->


   <!-- banner -->
   <div class="text-light text-right banner">
     <h1 class="display-4 banner-heading">Welcome to <span class="text-uppercase">Photo</span> <span class="display-3">X</span></h1>
     <p class="lead banner-par">lorem ipsem est egna nebdevnebdbe</p>
   </div>
   <!-- end banner -->
  </header>
  <!-- end header -->

CSS：

body {
  font-family: 'Montserrat', sans-serif;
}


/* header */

header {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .5)) url(images/header-img.jpeg) no-repeat center center /cover;
}

/* navbar */
/* end navbar */


/* banner */
.banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* end banner */

/* end header */

Answer 1

当我检查您的代码时，它说背景不是有效的属性，因此要同时使用线性渐变和背景，您需要按如下所述用'，'（逗号）分隔这两个属性：

 background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .5)) , url(images/header-img.jpeg) no-repeat center center /cover;

建立一个引导头和横幅

1 个答案: