Question

我在当前项目中有一个问题。我在一个div中应用背景图像，并使用以下方式设置不透明度：在...之内，我已经采取了另一个div，它有边框和＆amp;内容，但我需要使用相同的背景图像突出显示没有不透明度的中间部分。

＆＃13;

.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; }

＆＃13;

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

＆＃13;

Answer 1

我做了一个替代版本，div包含了div（加上共享相同的背景值），而不是使用always @(posedge baudrate) begin

: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;
}

突出显示没有不透明度的部分

1 个答案: