一个简单的容器结构

Question

来自移动编程，我习惯于创建一些父隐藏视图，并将其放置在子视图中。尝试对html/css/Bootstrap做同样的事情。

说我已经布置了一些封面背景照片：

  <div class="openBackContainer">
         <img  src="images/Back.png" alt="l" />
  </div>

现在，我想在封面的中间创建一个方形的隐藏容器，其中包含标题和用于上传照片的按钮：

如您所见，我想在封面中间添加一个“虚拟/隐藏”容器，然后在内部对齐标题和按钮。 （此按钮稍后将使用引导程序类）

在封面照片中创建此容器的一种好的做法是什么？

Answer 1

首先，使用一个占据页面100％的容器，并设置其背景图像作为封面。 然后，您可以使用flex来使内部div居中-默认情况下它将是透明的。

body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
  background-image: url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hidden {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.txt{
  color: white;
  font-size: 24px;
  margin-bottom: 20px;
}

.hidden button {
  background-color: red;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  border: 0;
}

<div class="container">
  <div class="hidden">
    <div class="txt">Upload Photos</div>
    <button>+</button>
  </div>
  <div>