Question

我很难理解为什么我的 H1没有显示。它由div覆盖。奇怪的是，如果我将H1颜色更改为div以外的其他颜色，则background的父transparent可见。同一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;
    }
}

任何人都可以帮助我理解为什么会这样吗？非常欣赏它。

Answer 1

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

Answer 2

试试这个。

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

Answer 3

这是因为.outerContainer .imageSlider比它的父(.outerContainer)更大。因此它位于outerContainer之外且父级具有overflow: hidden。

您可以为transform-origin添加.outerContainer .imageSlider来解决此问题。

喜欢这个

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

以下是工作代码段

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

H1标签不显示

3 个答案: