在图像上添加不透明度

Question

我直截了当地说到这里。 我想在图像中创建一个简单的窗口。 在窗口外面会有样本图片上的不透明度。

说到css我不是很好，所以请耐心等待。

＆＃13;

＆＃13;

.section2{
 }

.section2 .row{
 margin: 0;
}
.the-container{
 position: relative;
 width: 100%;
 height: 450px;
}
.the-container .text-center{
 background: #fff;
 opacity: .9;
}

.img-canvas{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
background-image: url(https://www.aman.com/sites/default/files/styles/1371x706/public/amanpulo-location-1200-x-825.jpg?itok=4BQy9j-X);
background-size: 100% 100%;
background-position: 50% 50%;
background-attachment: scroll;
z-index: -1;
}
.window{
position:absolute;
width:50%;
height:50%;
background-size: cover;
top:0;
left:25%;
z-index: -1;
opacity: 1;
}

＆＃13;

<section class="section2" style="height:100vh;">
<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <div class="the-container">
            <div class="img-canvas"></div>
            <div class="window"></div>
        </div>
    </div>
</div>
</section>

＆＃13;

＆＃13;

＆＃13; 这样的事情：

这里是你操纵代码的小提琴： https://jsfiddle.net/Lk21vL01/

提前感谢。

Answer 1

你非常接近，你只需要在你的IS_SAME_ORIGIN元素上应用类似的样式并使用//Closure to execute the query with parameters def runQuery = { entry -> def output = sql.execute("delete from table name where user in (select user from user where ID=:id and type=:type)", [id:entry.key, type:entry.value] ) log.info(output) } //Added below two statements //Create the data that you want to remove in the form of map id, and type def deleteData = ['123':26, '1012':28, '423':27] def sql = Sql.newInstance('jdbc:oracle:thin:@jack:1521:test1', 'test', 'test', 'oracle.jdbc.driver.OracleDriver') log.info("SQL connetced") sql.connection.autoCommit = false try { log.info(sql) log.info("inside try") log.info("before") //Added below two statements //Call the above closure and pass key value pair in each iteration deleteData.each { runQuery(it) } log.info("after") sql.commit() println("Successfully committed") }catch(Exception ex) { sql.rollback() log.info("Transaction rollback"+ex) } sql.close()

请参阅此here

.window

Answer 2

不是最合适的方法，但你可以使用盒子阴影“黑客”来创建你正在寻找的效果。只需在窗口周围设置一个框阴影，其中0模糊，并且传播总是大于背景（类似1000，甚至5000像素）。

#background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, slategray, #333);
  overflow: hidden;
}

#window {
  position: absolute;
  width: 250px;
  height: 100px;
  top: 25%;
  left: 25%;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.75);
}

<div id="background">
  <div id="window">
  </div>
</div>