Создание начального заголовка и баннера - PullRequest
Новая
       22

Создание начального заголовка и баннера

0 голосов
/ 05 ноября 2018

Прежде всего, я абсолютный новичок с начальной загрузкой 4 и на самом деле создаю веб-сайт для тренировок.

Я хочу создать заголовок с черным фоном и светлым текстом, а также баннер со светлым текстом и изображением в качестве фона.

Моя проблема в том, что фон не меняется, и я не могу найти ошибку в своих CSS и HMTL.

Прикрепил оба отрывка в надежде, что кто-нибудь мне поможет.

Большое спасибо!

Best!

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 */

1 Ответ

0 голосов
/ 07 ноября 2018

Когда я проверил ваш код, он заявил, что background не является допустимым свойством, поэтому для совместного использования линейного градиента и фона вам нужно разделить эти два атрибута с помощью ',' (запятая), как указано ниже: 

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