Как я могу исправить непрозрачность начальной загрузки? - PullRequest
Новая
       12

Как я могу исправить непрозрачность начальной загрузки?

0 голосов
/ 21 мая 2018

Проверьте стороны изображения.Я пытаюсь сделать фон непрозрачным, не влияя на контент, который я на него накладываю.(Я не хочу, чтобы текст также имел непрозрачность) Но проблема во всем заключается в том, что стороны моей картинки не имеют непрозрачности. 

.container {
  position: relative;
  background-image: url("https://www.elephantsdeli.com/wp-content/uploads/fly-images/1673/elephants-delicatessen-sack-lunch-order-form-hero-image.jpg-1920x1080.jpg");
  height: 50vh; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.background {
  height: 100vh;
  background: rgba(255,255,255,.4)
}

.text-center {
  padding: 50px 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
  <div class="background">
    <h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>
  </div>
</div>

Ответы [ 3 ]

0 голосов
/ 21 мая 2018

Bootstrap 4 имеет вашу спину

просто добавьте эти классы h-100, которые дадут вам рост: 100% и px-0, которые дадут вам заполнение нулями по оси X 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container py-0 h-100">
  <div class="background">
    <h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>
  </div>
</div>

PS Вы также можете удалить container до тех пор, пока вы не используете класс row, который прервет ваше переполнение (поскольку строка имеет margin-left:-15px и margin-left:-15px)

0 голосов
/ 22 мая 2018

Вы должны использовать d-flex, align-items-center и justify-content-center вместо пользовательского стиля text-center.Кроме того, не устанавливайте высоту строки в число fixed: пусть она занимает всю высоту контейнера.

.container {
  position: relative;
  background-image: url("https://www.elephantsdeli.com/wp-content/uploads/fly-images/1673/elephants-delicatessen-sack-lunch-order-form-hero-image.jpg-1920x1080.jpg");
  height: 50vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.background {
  background: rgba(255, 255, 255, .4)
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
  <div class="row background h-100">
    <div class="col d-flex align-items-center justify-content-center">
      <h1 style="font-size: 350%;"><b>It's Lunch-Time!</b></h1>
    </div>
  </div>
</div>
0 голосов
/ 21 мая 2018

Если вы хотите использовать функции начального загрузчика 4, вы должны учитывать его правила.Его правила гласят, что container должен содержать row, а row должен содержать col.В этом случае ваша разметка будет выглядеть так, как вы хотите. 

.container {
  background-image: url("https://www.elephantsdeli.com/wp-content/uploads/fly-images/1673/elephants-delicatessen-sack-lunch-order-form-hero-image.jpg-1920x1080.jpg");
  height: 50vh; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.background {
  height: 100vh;
  background: rgba(255,255,255,.4)
}

.text-center {
  padding: 50px 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
<div class="row">
  <div class="background col">
    <h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>
  </div>
  </div>
</div>
...