Вопросы Теги

Backgroung img с filter и nav

у меня есть следующее сомнение: у меня есть div с background img, им agrege filter brightness, но, это также предано тому, что у меня есть рядом с этим изображением: introducir la descripción de la imagen aquí

код 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

0
задан 26.10.2019, 23:23
1 ответ

Одна 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>
0
ответ дан 02.12.2019, 23:15