用图像的响应高度在图像上进行分割，引导程序为4.3.1

时间：2019-03-02 16:52:33

标签： html css twitter-bootstrap flexbox bootstrap-4

我在图像上制作了两层，一层是使图像变暗的过滤器，第二层是具有一些随机文本的内容。 我想将它们与宽度和高度相同的图像对齐，但是我不知道该怎么做。我也尝试过使用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 :(得分：1)

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

相关问题
最新问题