Html 如何创建应用于标题中的灰度（1）异常_Html_Css

Html 如何创建应用于标题中的灰度（1）异常

html css

Html 如何创建应用于标题中的灰度（1）异常,html,css,Html,Css,我有一个标题，其中嵌套了两个div（导航）和一个img（logo）元素。我在标题中声明了-webkit filter:grayscale（1），它可以很好地将grayscale应用于标题中包含的所有内容。唯一的问题是我不想灰度应用于标志。已经尝试了许多选项（没有一个可行）：将徽标从标题中取出（创建空白）在页眉周围创建一个div，并将img放在页眉内，但不在页眉外标题（创建空白空间）使用多种选择器来隔离img，例如：not（否（效果） html是： <body> <

我有一个标题，其中嵌套了两个div（导航）和一个img（logo）元素。我在标题中声明了-webkit filter:grayscale（1），它可以很好地将grayscale应用于标题中包含的所有内容。唯一的问题是我不想灰度应用于标志。已经尝试了许多选项（没有一个可行）：

将徽标从标题中取出（创建空白）
在页眉周围创建一个div，并将img放在页眉内，但不在页眉外标题（创建空白空间）
使用多种选择器来隔离img，例如
```
：not
```
（否（效果）

html是：

<body>
<header>
  <nav class="navbar-fixed-bottom">
        <ul class="navbar-nav">
            <li>
                <a href="#">news</a>
            </li>           
            <li>
                <a href="#">recipe</a>
            </li>   
            <li>
                <a href="#">event</a>
            </li>   
            <li>
                <a href="#">food</a>
            </li>   
        </ul>
    </nav>
        <img class="logo" src="images/main_logo_03.png" alt="main">  
</header>

如何使.logo不受灰度的影响，同时保持它在页眉中心的位置？（我只是在寻找chrome上的应用程序）会很感激您的见解。

找到了一个解决方法-将

.logo

置于页眉外部，并将其绝对定位

   html , body{
    margin: 0;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    }

    header {
    height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;

    overflow-x: hidden;
    font-size: 100%;
    position: relative;
    margin-bottom: 1%;


  background-image: url(../chateau-default3.jpg); 
  background-size: cover;  
  background-repeat: no-repeat;
  background-position: center;
-webkit-filter: grayscale(1); 


  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.navbar-fixed-bottom {

    width: 100%;
    height: 10%;
    position: absolute;
    bottom: 0px; 

    margin: auto;
  padding: 0;

 }

.navbar-nav > ul{

  margin-left: auto;
  margin-right: auto;
    width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
} 

.logo{
  height: auto;
  width: auto;
max-height: 41%;
max-width: 41%;  
position: relative;
top: -7%;

}