Question

我设置了一个页面，其中有一个带有重叠div的图像，用于保存文本。文本正确显示直到介质断点，但在其上方消失。我查看了Chrome Dev Tools，当我将鼠标悬停在文本上时，它会突出显示图像中应该驻留的部分，但文本仍然无法显示。

以下是页面适用部分的HTML结构：

.hero-image-row {
   margin-top: -100px;
   overflow-x: hidden !important;
   width: 100% !important;
 }

.hero-image-outer {
   width: 300%;
   height: 500px;
   overflow-y: hidden !important;
 }

 .hero-image-inner {
   width: 66%;
   overflow-x: hidden !important;
 }

 .hero-image {
   height: 500px;
   margin-left: -50%;
   z-index: 0 !important;
 }

.overlap-hero-image {
     margin-top: -500px;
     height: 500px;
}

.overlap-hero-image h4 {
 margin-top: 140px;
 color: #FFFFFF !important;
 text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
     -1px 1px 0 #000,
        1px 1px 0 #000 !important;
}

 @media screen and (min-width: 1100px) {
   .hero-image-outer {
     width: 100%;
   }

   .hero-image-inner {
     width: 100%;
     height: 500px;
   }

   .hero-image {
     width: 100%;
     height: auto;
     margin-left: 0%;
   }
 }

这是相关的CSS：

bootstrap

我知道图像在一页上以1140px消失，而在不同页面上却是1100px，所以它与CSS中建立的断点有什么关系我不确定。有人能看出这是怎么回事吗？我试过设置z索引但无济于事。

我正在使用{{1}}，如果这有所不同。我无法将图像设置为CSS背景，因为当我将它推送到Heroku时，我遇到了CSS背景图像的图像编译问题，所以我需要一个解决方案，将图像链接到HTML中。

Answer 1

在.hero-image-inner下的css区块@media screen and (min-width: 1100px)内，注释掉height: 500px;。

   .hero-image-inner {
     width: 100%;
     /*height: 500px;*/
   }

它干扰了它继承的overflow。

http://codepen.io/EskoCruz/pen/KMMBBz

文本消失在页面调整大小

1 个答案: