在图像上添加不透明度

Question

我直接来点。我想在图像内创建一个简单的窗口，窗口外部将具有类似示例图片上的不透明度。

当涉及到CSS时，我的水平不是很好，所以请谅解。

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

<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>

something like this:

这是一个供您操作代码的示例链接: https://jsfiddle.net/Lk21vL01/。 谢谢您提前的支持。

- Sam Teng Wong

---

嘿！这违反了 StackOverflow 的规定吗？你应该自己去做，而不是向他人提问以获取完整的解决方案。 - Sherly Febrianti

@sherlyfebrianti，OP已经发布了他们的尝试，我不认为这是要求别人做整个事情。 - haxxxton

@sherlyfebrianti 很抱歉。我尝试了一些东西，但没有放进去所有的东西...我有一个标题，但那会影响透明度...然而，我真的想不出如何制作图像的两侧。 - Sam Teng Wong

嘿，这个链接可能对你有帮助：http://stackoverflow.com/questions/26622143/is-it-possible-to-make-certain-parts-of-an-image-transparent-in-html5-css - Geeky

@Geeky 谢谢你这个。 - Sam Teng Wong

@SamTengWong 好的，我也很抱歉，可能是对你的帖子有些误解。 - Sherly Febrianti

Answer 1

虽然这种方法并不是最合适的，但你可以使用“hack”的方式来创建你所需要的效果。只需在窗口周围设置一个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>

- Alfred Xing

Answer 2

您离正确答案很近了，您只需要将类名为.window的元素应用相似的样式，并使用background-attachment:fixed即可。

请查看此更新后的jsfiddle。

.section2{
}

.section2 .row{
  margin: 0;
}
.the-container{
  position: relative;
  width: 100%;
  height: 450px;
}
.the-container .text-center{
    background: #fff;
    opacity: .9;
}
.window,
.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:fixed;
    z-index: -1;
    opacity: 0.5;
}
.window{
  position:absolute;
  width:50%;
  height:50%;
  top:0;
  left:25%;
  z-index: -1;
  opacity: 1;
}

- haxxxton

---

谢谢，这正是我在寻找的。我会在4分钟内接受你的答案。 - Sam Teng Wong