Разделить изображение с учетом высоты изображения, начальная загрузка 4.3.1 - PullRequest
Новая
       25

Разделить изображение с учетом высоты изображения, начальная загрузка 4.3.1

0 голосов
/ 02 марта 2019

Я сделал два слоя поверх изображения, один - фильтр, который делает изображение тусклым, а второй - контент, содержащий некоторый случайный текст.Я хотел бы выровнять их так же, как изображение с той же шириной и высотой, но я не знаю, как это сделать.Я также пытался сделать в CSS background-image: url('...'), но это тоже не сработало.

Когда я изменяю ширину и высоту окна браузера, все это не работает ... Слои имеютисправлено 632px, и я не знаю, как задать им величину высоты относительно высоты изображения. 

html {
  scroll-behavior: smooth;
}

body {
  background: #fff;
  font-family: 'Lato', sans-serif;
}

header {
  background: #eee;
  width: 100%;
  height: 100px;
}

ul {
  background: #eee !important;
}

header a {
  text-decoration: none;
  color: white;
}

header ul {
  list-style-type: none;
}

ul {
  background: #fff;
  margin-top: 10px;
  display: flex;
  font-size: 85%;
  width: 100%;
  padding-left: 0;
}

ul>li {
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  outline: none;
}

p {
  font-size: 115%;
}


/*header a*/

.nav-item a {
  display: inline-block;
  color: black;
  width: 200px;
  padding: 25px 0px;
  text-align: center;
}

.nav-item a:hover {
  text-decoration: none;
  color: #000000 !important;
  background: #d1de4c;
}

.header-container {
  padding-top: 6px;
}

.container-fluid {
  padding-left: 0;
}

.presentation {
  width: 100%;
  height: 632px;
}

.img-content {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.img-filtr {
  z-index: 1;
  background: black;
  opacity: 0.45;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.nav-item.active>a {
  color: #d1de4c;
}

.col-12 {
  padding-right: 0;
}
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700&amp;subset=latin-ext" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <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">
  <link rel="stylesheet" href="style.css">
</head>

<body id="home" data-target=".navigation" data-offset="0" data-spy="scroll">

  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <header class="header-container sticky-top">
          <nav class="navbar navbar-expand-lg">
            <a class="navbar-brand" href="#home"><img src="https://i.stack.imgur.com/Fzk7J.png" class="img-fluid"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                            <span class="navbar-toggler-icon"></span>
                                        </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#home">STRONA GŁÓWNA <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#firma">O FIRMIE</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#oferta">OFERTA</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#etapy">ETAPY SPRZĄTANIA</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#opinie">OPINIE</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#kontakt">KONTAKT</a>
                </li>
              </ul>
            </div>
          </nav>
        </header>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div class="presentation">
          <div class="img-content">Some text, styling not finished</div>
          <div class="img-filtr"></div>
          <img style="z-index:0;" src="https://i.stack.imgur.com/PNDW6.jpg" class="img-fluid img-in-placeholder">
        </div>
      </div>

    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

На весь экран слой с текстом и фильтром выровнен не очень хорошо: Full screen, the layer with text and filtr are not well aligned

Когда я изменяюв оконном аспекте все идет еще хуже: When I change the window aspect it goes even worse

1 Ответ

0 голосов
/ 02 марта 2019

Сделайте height из presentation 100% и дайте ему position: relative - это позволит абсолютно позиционированному дочернему элементу позиционироваться относительно этого элемента - см. Демонстрацию ниже: 

html {
  scroll-behavior: smooth;
}

body {
  background: #fff;
  font-family: 'Lato', sans-serif;
}

header {
  background: #eee;
  width: 100%;
  height: 100px;
}

ul {
  background: #eee !important;
}

header a {
  text-decoration: none;
  color: white;
}

header ul {
  list-style-type: none;
}

ul {
  background: #fff;
  margin-top: 10px;
  display: flex;
  font-size: 85%;
  width: 100%;
  padding-left: 0;
}

ul>li {
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  outline: none;
}

p {
  font-size: 115%;
}


/*header a*/

.nav-item a {
  display: inline-block;
  color: black;
  width: 200px;
  padding: 25px 0px;
  text-align: center;
}

.nav-item a:hover {
  text-decoration: none;
  color: #000000 !important;
  background: #d1de4c;
}

.header-container {
  padding-top: 6px;
}

.container-fluid {
  padding-left: 0;
}

.presentation {
  width: 100%;
  /*height: 632px;*/
  height: 100%; /* ADDED */
  position: relative; /* ADDED */
}

.img-content {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.img-filtr {
  z-index: 1;
  background: black;
  opacity: 0.45;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.nav-item.active>a {
  color: #d1de4c;
}

.col-12 {
  padding-right: 0;
}
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700&amp;subset=latin-ext" rel="stylesheet">

<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">

<div id="home" data-target=".navigation" data-offset="0" data-spy="scroll">

  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <header class="header-container sticky-top">
          <nav class="navbar navbar-expand-lg">
            <a class="navbar-brand" href="#home"><img src="https://i.stack.imgur.com/Fzk7J.png" class="img-fluid"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                        <span class="navbar-toggler-icon"></span>
                                    </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#home">STRONA GŁÓWNA <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#firma">O FIRMIE</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#oferta">OFERTA</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#etapy">ETAPY SPRZĄTANIA</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#opinie">OPINIE</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#kontakt">KONTAKT</a>
                </li>
              </ul>
            </div>
          </nav>
        </header>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div class="presentation">
          <div class="img-content">Some text, styling not finished</div>
          <div class="img-filtr"></div>
          <img style="z-index:0;" src="https://i.stack.imgur.com/PNDW6.jpg" class="img-fluid img-in-placeholder">
        </div>
      </div>

    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...