у меня есть следующее сомнение: у меня есть div с background img, им agrege filter brightness, но, это также предано тому, что у меня есть рядом с этим изображением:
код html:
<header>
<div id="logo-page">
<div id="top-bar">
<nav>
<a href="#" class="menu">home</a>
<a href="#work" class="menu">work</a>
<a href="#projects" class="menu">projects</a>
<a href="#gallery" class="menu">gallery</a>
<a href="#papers" class="menu">papers</a>
<a href="#" class="menu">contact</a>
</nav>
</div>
</div><!-- Logo -->
</header>
CSS:
#logo-page{
background-color: rgba(0,0,0,1);
background-image: url("../img/logo.jpg");
width: auto;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
filter:brightness(0.5);
}
идея состоит в том, чтобы nav или в Вашем эффекте, что agrege я углубляюсь, не оказался затронутым filter
Одна soluciГіn, что со мной случается, следующая.
#logo-page {
background-color: rgba(0, 0, 0, 1);
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
filter: brightness(0.2);
}
#top-bar {
position: fixed;
z-index: 5;
}
<header>
<div>
<div id="top-bar">
<nav>
<a href="#" class="menu">home</a>
<a href="#work" class="menu">work</a>
<a href="#projects" class="menu">projects</a>
<a href="#gallery" class="menu">gallery</a>
<a href="#papers" class="menu">papers</a>
<a href="#" class="menu">contact</a>
</nav>
</div>
</div>
<img id="logo-page" src="http://lorempixel.com/1920/1920/" alt="" />
<!-- Logo -->
</header>
Из этой формы ты получаешь, что твой background и твой navbar estГ©n отделенные и ты можешь применять фильтр со всей свободой.
TambiГ©n я предлагаю эту тебе soluciГіn, что я думаю, что он идет больше, согласно которому ты ищешь.
#logo-page {
background-color: rgba(0, 0, 0, 1);
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
filter: brightness(0.2);
}
html{
/* la imagen a ser mostrada a pantalla completa */
background:url('http://lorempixel.com/1920/1920/') no-repeat center center;
/* nos aseguramos que el elemento ocupe toda la ventana del navegador */
min-height:100%;
/* Propiedad a utilizar para la imagen */
background-size:cover;
}
<header>
<div>
<div id="top-bar">
<nav>
<a href="#" class="menu">home</a>
<a href="#work" class="menu">work</a>
<a href="#projects" class="menu">projects</a>
<a href="#gallery" class="menu">gallery</a>
<a href="#papers" class="menu">papers</a>
<a href="#" class="menu">contact</a>
</nav>
</div>
</div>
<!-- Logo -->
</header>