H1 标签不显示答案

【问题标题】：H1 tag does not show upH1 标签不显示
【发布时间】：2018-03-09 19:28:13
【问题描述】：

我很难理解为什么我的 H1 没有出现。它由div 覆盖。奇怪的是，如果我将background 颜色更改为transparent 以外的其他颜色，H1 的父级div 是可见的。同一div 内的输入标签也始终可见。只有H1 有问题。

这里是代码的链接：H1 does not show up 和代码HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="outerContainer">
        <div class="imageSlider">
            <div class="overlayShadow"></div>
            <div class="content">
                <h1> Test </h1>
                <input>
            </div>
        </div>
    </div>
</body>
</html>

SCSS：

.outerContainer {
    z-index: 1;
    overflow: hidden;
    height: 80vh;
    .imageSlider {
        z-index: -1;
        height: 80vh;
        position: relative;
        margin-bottom: 20px;
        background-position: center;
        background-size: cover;
        overflow: hidden;
        background-image:           url('https://tinypng.com/images/social/website.jpg');
        animation: mymove 7s cubic-bezier(0,1,0,.5)infinite;
        transform: scale(1.5,1.5);
        .overlayShadow {
            z-index: -1;
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: #000;
            animation: darken 7s cubic-bezier(0,1,1,.8) infinite;
        }
    }
}
@-webkit-keyframes mymove {
    0% {
        top: 0px;
    }
    100% {
        top: -70px;
    }
}
@keyframes mymove {
    0% {
        top: 0px;
    }
    100% {
        top: -70px;
    }
}
@-webkit-keyframes darken {
    0% {
        opacity: 1;
    }
    26% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes darken {
    0% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.content {
    z-index: 1 !important;
    position: absolute !important;
    height: 300px !important;
    top: 50% !important;
    width: 100% !important;
    margin: 0 auto !important;
    h1 {
        font-size: 24px !important;
        display: inline-block !important;
        z-index: 999 !important;
        font-size: 14px !important;
        line-height: 1.43 !important;
        color: #484848 !important;
    }
}

谁能帮我理解为什么会这样？非常感谢。

【问题讨论】：

transform: scale(1.5,1.5) 可能已将h1 移出视口

标签： html css sass css-animations

【解决方案1】：

这是因为 .outerContainer .imageSlider 比它的父 (.outerContainer) 大。所以它在 outerContainer 之外，父母有 overflow: hidden 。

您可以通过为.outerContainer .imageSlider 添加transform-origin 来克服这个问题。

像这样

.outerContainer .imageSlider {
    transform-origin: left center;
}

这是工作片段

.outerContainer {
  z-index: 1;
  overflow: hidden;
  height: 80vh;
}
.imageSlider {
  z-index: -1;
  height: 80vh;
  position: relative;
  margin-bottom: 20px;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-image: url('https://tinypng.com/images/social/website.jpg');
  animation: mymove 7s cubic-bezier(0, 1, 0, .5)infinite;
  transform: scale(1.5, 1.5);
  transform-origin: left center;
}
.overlayShadow {
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #000;
  animation: darken 7s cubic-bezier(0, 1, 1, .8) infinite;
}
@-webkit-keyframes mymove {
  0% {
    top: 0px;
  }
  100% {
    top: -70px;
  }
}
@keyframes mymove {
  0% {
    top: 0px;
  }
  100% {
    top: -70px;
  }
}
@-webkit-keyframes darken {
  0% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes darken {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.content {
  z-index: 1 !important;
  position: absolute !important;
  height: 300px !important;
  top: 50% !important;
  width: 100% !important;
  margin: 0 auto !important;
}
h1 {
  font-size: 24px !important;
  display: inline-block !important;
  z-index: 999 !important;
  font-size: 14px !important;
  line-height: 1.43 !important;
  color: #484848 !important;
}

<div class="outerContainer">
    <div class="imageSlider">
        <div class="overlayShadow"></div>
        <div class="content">
            <h1> Test </h1>
            <input>
        </div>
    </div>
</div>

【讨论】：

哇，这是一个快速响应，非常感谢。你做的修复很漂亮。我还有很多东西要学:) 再次感谢大家的帮助。
@MaciejCzarnota 欢迎您。更好的答案值得支持；）。
我想投票，但它说我需要 15 声望。我是codestack的新手-_-。我猜需要提出并回答问题才能获得这个代表。
没问题，再次感谢。

【解决方案2】：

问题是.imageslider 上的transform: scale，内容超出了其父级的宽度。然后还有overflow: hidden; 正在修剪元素之外的任何内容。

【讨论】：

【解决方案3】：

试试这个。

    .outerContainer {
      z-index: 1;
      overflow: hidden;
      height: 80vh;
    }
    .imageSlider {
        z-index: -1;
        height: 80vh;
        position: relative;
        margin-bottom: 20px;
        background-position: center;
        background-size: cover;
        overflow: hidden;
        background-image:           url('https://tinypng.com/images/social/website.jpg');
        animation: mymove 7s cubic-bezier(0,1,0,.5)infinite;
        transform: scale(1.5,1.5);
      }
      .overlayShadow {
          z-index: -1;
          width: 100%;
          height: 100%;
          position: absolute;
          background-color: #000;
          animation: darken 7s cubic-bezier(0,1,1,.8) infinite;
      }
    }
}
@-webkit-keyframes mymove {
    0% {
        top: 0px;
    }
    100% {
        top: -70px;
    }
}
@keyframes mymove {
    0% {
        top: 0px;
    }
    100% {
        top: -70px;
    }
}
@-webkit-keyframes darken {
    0% {
        opacity: 1;
    }
    26% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes darken {
    0% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.content {
    z-index: 9999 !important;
    position: absolute !important;
    height: 300px !important;
    top: 50%;
    width: 100% !important;
    margin: 0 auto !important;
    left: 50%;
    right: 50%;
}
  h1 {
    font-size: 24px !important;
    display: inline-block !important;
    z-index: 999 !important;
    font-size: 14px !important;
    line-height: 1.43 !important;
    color: #484848 !important;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <div class="outerContainer">
                <div class="imageSlider">
                    <div class="overlayShadow"></div>
                    <div class="content">
                      <h1>
                        Test
                      </h1>
                     <input> 
                    </div>
                </div>
        </div>
</body>
</html>

【讨论】：