增加遮罩容器高度后样式中断

Question

我有这个过滤器蒙版可以使页面的下半部分变成黑白。添加带有闪烁的文本后，我需要调整蒙版的高度以使其均匀。当我调整高度时，它会破坏我应用程序中的所有样式。我做错了什么？

class App extends Component {
  render() {
    return (
      <div className="portfoliobackground">
          <h1 data-heading="i">Malik</h1>
            <div className='profile-box container'>
            </div>
      </div>
    );
  }
}

这是我下面的scss

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes showHide { /* Chrome, Safari */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}

body{
  background: url('../images/wtc2.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width:100%;
  height: 100%;
}






.profile-box{
  -webkit-animation: fadeIn 3s ease-in;
  z-index: -1;
  background: url('../images/wtc.jpg') no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 filter: grayscale(100%);
 width: 100%;
 height: 65%;
 margin-top: 15%;

 border-top: white solid 1px;
 position: absolute;

}

$h1:  rgba(45,45,45,1);
$blue: #98b5cc;
$yellow: #ffcc00;
$outline: rgba(#fff, .4);
$shadow: rgba($yellow, .5);



h1 {
    font-family: 'CoreCircus', sans-serif;
    font-size: 14vw;
    text-align: center;
    line-height: 1;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    color: $h1;
    letter-spacing: -.5rem;

    &:before {
        content: attr(data-heading);
        position: absolute;
        overflow: hidden;
        color: #e22422;
        width: 100%;
        z-index: 5;
        text-shadow: none;
        left: 67%;
        text-align: left;
        animation: flicker 3s linear infinite;
    }
}

@keyframes flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
        opacity: .99;
        text-shadow: -1px -1px 0 $outline, 1px -1px 0 $outline, -1px 1px 0 $outline, 1px 1px 0 $outline, 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;
    }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.4;
        text-shadow: none;
    }
}


@font-face {
    font-family: 'CoreCircus2DDot1';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.woff2') format('woff2'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.ttf') format('truetype');
}

@font-face {
    font-family: 'CoreCircus';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.woff2') format('woff2'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.ttf') format('truetype');
}

它应该看起来是白色边框直接在中间，文本直接在行的顶部。

在我添加文本动画之前，它运行良好。出于样式目的，我更喜欢保留闪烁效果。

Answer 1

将<h1> 放入.profile-box div 后试试这个。

.portfoliobackground { 
    position: relative;

    .profile-box {
      position: absolute;
      top: 50%;
      bottom: 0;

      h1 {
        position: absolute;
        bottom: 100%;
      }
    }
}