Question

我试图以大约90％的方式使此代码正常工作，但是在扩展和使flexbox响应方面遇到困难。我想知道的是：

1）当我在第20行（以及44和68）上将宽度更改为auto时，为什么图像消失了？我希望图像适合在框内，文本覆盖在图像上。

2）如何使图像框响应？在移动设备中时，我希望它们堆叠在一起，然后在到达桌面时弯曲，以便它们排成一排。所以列到行。为什么这样不起作用？

任何有助于使图像适合框内的帮助以及使文本覆盖以覆盖图像并使其弯曲和响应的帮助都将有所帮助。我已经坚持了好一阵子了，不知道为什么这不起作用。
Code Pen link

HTML

<div class="opener-wrapper">

  <div id="opener1" class="opener flex-center">
    <div class="opener-msg">
      <h1 class="opener-title">Lorem Ipsum Title</h1>
      <p class="opener-subtitle">Lorem Ipsum Text that doesnt matter</p>
    </div>
  </div>
  <div id="opener2" class="opener flex-center">
    <div class="opener-msg">
      <h1 class="opener-title">Lore Ipsum Title</h1>
      <p class="opener-subtitle">Lorem Ipsum Text that doesnt matter</p>
    </div>
  </div>
  <div id="opener3" class="opener flex-center">
    <div class="opener-msg">
      <h1 class="opener-title">Lorem Ipsum Title</h1>
      <p class="opener-subtitle">Lorem Ipsum Text that doesnt matter</p>
    </div>
  </div>

</div>

CSS

.opener-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.opener {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

#opener1::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener1::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

#opener2::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener2::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

#opener3::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener3::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

.flex-center {
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;  */
}

.opener-msg {
  color: #fff;
  text-shadow: #343a40 2px 2px;
  min-width: 100%;
  min-height: 12em;
  position: relative;
  margin: 3% 0;
  text-transform: uppercase;
}

.opener-msg::before {
  content: "";
  display: block;
  position: absolute;
  margin-left: 0;
  min-width: 100%;
  min-height: 12em;
  z-index: -1;
  opacity: 0.4;
  background-color: #343a40;
}

.opener-title,
.opener-subtitle {
  width: 100%;
  display: block;
  text-align: center;
}

.opener-title {
  margin: 3% 0;
}

Answer 1

1）当我在第20行（以及44和68）上将宽度更改为auto时，为什么图像消失了？我希望图像适合在框内，文本覆盖在图像上。

此框设置为position: absolute。相对于其父容器（或下一个相对定位的父容器）调整绝对定位的元素的大小。它们需要宽度和高度。

如果您在background-image上设置#opener1，并在#opener1::after上设置颜色叠加该怎么办？

2）如何使图像框响应？在移动设备中时，我希望它们堆叠在一起，然后在到达桌面时弯曲，以便它们排成一排。所以列到行。为什么这样不起作用？

您需要在flex容器上将flex-direction设置为row。当前flex-direction上没有设置.opener-wrapper。这将使盒子水平流动。另外，您将min-width设置为100%。这将确保您的盒子占据100％的宽度-这不是您想要的。删除此行，然后添加max-width: 33.33%;。

如果您还没有看过克里斯·科耶尔（Chris Coyier）的A Complete Guide to Flexbox，那就不妨看看！

Answer 2

1）width: auto;将元素的宽度设置为浏览器的默认宽度。在这种情况下，浏览器会初始化:before伪元素，其宽度为0px，可以在this imgur image的计算样式中看到

2）您将需要@media条规则来调整元素的大小，具体取决于查看页面的方式。目前，您所有的开瓶器中width的{{1}}和min-width。这使他们使用了100％的占用空间。如果希望元素显示在同一行上，则必须将100％除以要在每一行上显示的元素数。对于这三个元素，我做了以下事情。

100%

为此，我在CSS中添加了.opener { width: 33%; height: 100%; min-width: 33%; min-height: 100%; }部分，以在显示尺寸小于600像素时将元素的宽度更改为100％。

@media

所有，您的CSS应该与此类似：

@media only screen and (max-width: 600px) {
    .opener {
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
    }

    #opener1::before {
        width: 100%;
        min-width: 100%;
    }

    #opener2::before {
        width: 100%;
        min-width: 100%;
    }

    #opener3::before {
        width: 100%;
        min-width: 100%;
    }

}

试图使图像适合盒子和盒子以响应

2 个答案: