如何使视差div前面的内容不受滤镜标签的影响?

时间:2019-01-23 18:29:39

标签: html css

所以基本上,我似乎无法使前层完全变成白色。我只想将其应用于背景图片的滤镜标签会继续变亮。

我已经在互联网上搜索了类似的问题,但是我没有找到明确的解决方案(或者我似乎做不到)。基本上,我只是希望我的网站与该网站(用于学校作业)相似-https://trabalha-com-avon.webnode.pt/-但主要文本始终会受到过滤器标签的影响。

header{
      z-index: 2;
    }
    
    .titulo{
    width: auto;
    }

    .trabalha-com-avon{
      float:left;
      padding:0 35px;
      border:0;
      box-sizing: border-box;
      width: 32%;
      text-align: center;
    }
    
    .trabalha-com-avon h1{
      background-color: #ffffff;
      color: #000000;
      font-weight: lighter;
      height: 1.6em;
      padding-top: 10px;
    }
    
    .menu{
      float: right;
      padding:40px 20px;
      font-family:"proxima-nova";
    }
    
    .lucros{
       float:left;
       display: block;
       clear: both;
       color: #ffffff;
       padding: 0px 40px;
       position: relative;
       top: -30px;
    }

     .lucros p{
       font-size: 18px;
     }

    #avon{
      font-weight: bold;
    }
     
    nav{
      float: right;
      color: #ffffff;
    }
     
    .fundo{
      z-index:2;
      width: 76%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    
    .fundo h1, .fundo h3{
      text-align: center;
      color:#ffffff;
      font-weight: lighter;
    }
     
     .fundo h1{
       font-size: 400%;
       padding-top: 100px;
    }
     
    .fundo h3{
      font-size: 150%;
      position: relative;
      top: -40px;
     }
    
    .parallax {
      position:relative;
      background: url("img/fundo.jpeg");
      -webkit-filter: brightness(70%);
      filter: brightness(70%);
      height: 100%;
      z-index:-1;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
     }
<body>
      <header>
        <div class="titulo">
          <div class="trabalha-com-avon">
             <h1>TRABALHA COM <span id="avon">AVON</span></h1>
          </div>
          <div class="menu">
            <nav>
              <a>INÍCIO / </a>
              <a>SEJA REVENDEDORA /</a>
              <a>VANTAGENS /</a>
              <a>CONTACTOS</a>
            </nav>
          </div>
          <div class="lucros">
            <p>Lucros até 35%</p>
          </div>
        </div>
      </header>
    <div class="parallax">
      <div class="fundo">
        <h1>BELEZA QUE FAZ SENTIDO</h1>
        <h3>TORNA-TE REVENDEDORA</h3>
      </div>
    </div>

我只希望文本“ BELEZA QUE FAZ SENTIDO”及其下面的行完全为白色(不受过滤器的影响)。

0 个答案:

没有答案