所以基本上,我似乎无法使前层完全变成白色。我只想将其应用于背景图片的滤镜标签会继续变亮。
我已经在互联网上搜索了类似的问题,但是我没有找到明确的解决方案(或者我似乎做不到)。基本上,我只是希望我的网站与该网站(用于学校作业)相似-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”及其下面的行完全为白色(不受过滤器的影响)。