2 CSS背景互相覆盖

Question

body{
  background:url(https://upload.wikimedia.org/wikipedia/commons/d/dd/Lake_macquarie_dusk.JPG);
  background-size:cover;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

*{
  margin:0;
  padding:0;
}
#search{
  color:white;
  font-size:200px;
}
#search:hover{
  background:white;
  height:260px;
  width:260px;
  border-radius:50%;
  
  display:flex;
  justify-content:center;
  align-items:center;
}
#search:hover{
  background:url(https://upload.wikimedia.org/wikipedia/commons/d/dd/Lake_macquarie_dusk.JPG) fixed no-repeat;
  background-size:cover;
  color:#21537a;/*text color for nonwebkit*/
  -webkit-text-fill-color: transparent;
  background-size:cover;
  -webkit-background-clip:text;
}

<div id='search'><i class="fa fa-search circle"></i></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

对于#seach，我的悬停效果有两个背景。其中一个背景属性是将背景图片剪辑到放大镜。另一个背景是白色圆圈。

这是我想要的效果。但重要提示：请注意悬停效果被裁剪为2种不同的东西。一个悬停效果被剪切到外部div。另一个悬停效果被剪切到放大镜。因此，如果你移动光标，只需稍微离开放大镜就会消失，只留下圆圈。

在这里，我将#search（属于outter div）更改为.circle，它属于标记。

body{
  background:url(https://upload.wikimedia.org/wikipedia/commons/d/dd/Lake_macquarie_dusk.JPG);
  background-size:cover;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

*{
  margin:0;
  padding:0;
}
#search{
  color:white;
  font-size:200px;
}
#search:hover{
  background:white;
  height:260px;
  width:260px;
  border-radius:50%;
  
  display:flex;
  justify-content:center;
  align-items:center;
}
.circle:hover{
  background:url(https://upload.wikimedia.org/wikipedia/commons/d/dd/Lake_macquarie_dusk.JPG) fixed no-repeat;
  background-size:cover;
  color:#21537a;/*text color for nonwebkit*/
  -webkit-text-fill-color: transparent;
  background-size:cover;
  -webkit-background-clip:text;
}

<div id='search'><i class="fa fa-search circle"></i></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">