高亮显示不透明度的部分

Question

我在当前项目中有一个问题。我正在一个div中应用背景图像，并使用：after.设置不透明度。在里面，我拍摄了另一个具有边框和内容的div，但我需要使用相同的背景图像突出显示中间部分而不是不透明度。

示例屏幕截图

.first_resorts_list_right { float: left; width: 434px; overflow: hidden; height: 477px; background-size: cover!important; background: no-repeat; padding: 70px; position: relative; background-image: url(http://s17.postimg.org/fa4ru3hm7/test.jpg); }
.resort-info { border: 10px solid #fff; padding: 20px; text-align: center; color: #000; font-size: 40px; }
.bannerimage2 { display: none; }
.expose { position: relative; z-index: 99999; }
.overlay-img { background: rgba(255,255,255,0.3); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99998; }

<div class="first_resorts_list_right">
    <div class="resort-info expose">Content</div>
    <div class="overlay-img"></div>
  </div>

Answer 1

我做了一个替代版本，divs包装divs（加上共享相同的背景值）而不是使用:after

body {
  width:100%;
  height: 100vh;
  margin: 0px;
  font-family: arial, sans-serif;
}
#container {
  width:100%;
  height:100%;
  position: relative;  
}
#big {  
  top:0;
  left:0;
  width:100%;
  height: 100%;
  background-image: url("http://i.imgur.com/wvIxNg1.jpg");
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  background-position: center; 
  position: relative;
  -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
  filter: blur(5px);
}
#small {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 70%;
  height: 70%;
  outline: 4px solid white;
  left: 0;
  right: 0;
  margin: auto;
  background-image: url("http://i.imgur.com/wvIxNg1.jpg");
  background-size: 100vw 100vh;
  background-position: center; 
  background-repeat: no-repeat;
  text-align: center;
  color: white;
  -webkit-filter: contrast(120%); /* Chrome, Safari, Opera */
  filter: contrast(120%);
}
#white {
  width:100%;  
  height: 100%;
  background-color: white;
  opacity: 0.1;
}
h1 {
  font-weight: 100;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  letter-spacing:8px;
}

<div id=container>
  
<div id=big>
<div id=white></div>
</div>  
  
<div id=small><h1>FOCUS</h1></div>
</div>