在图像上添加不透明度

我正在直接指向这里。我想在图像中创建一个简单的窗口。窗口外部的将具有不透明度，就像样本图片上的不透明度。在图像上添加不透明度

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

是这样的：

，这里是一个捣鼓您操作的代码： https://jsfiddle.net/Lk21vL01/

在此先感谢。

来源

2016-11-25 Sam Teng Wong

开平!!它违反了这个计算器规则吗？！你应该自己做。不要问问题让别人完成整件事情。 –

@sherlyfebrianti，OP已经发布了他们的尝试，我wouldnt考虑这个要求人们做本身的整个事情 – haxxxton

@sherlyfebrianti对不起。我尝试了一些东西，但没有放置所有东西..我有一个标题，但这需要不透明度..但是我无法真正弄清楚如何制作图像的两面。 –

你非常接近，你只需要类似的造型适用于您.window元素，并使用background-attachment:fixed

看到这个updated 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; 
}

来源

2016-11-25 04:11:41 haxxxton

谢谢..这是我一直在寻找。我会在4分钟内接受你的回答。 –

不是最合适的方式来实现这一点，但你可以使用一个盒子阴影“黑客”来创建你正在寻找的效果。只需在窗口周围设置一个箱子阴影，使其具有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>

来源

2016-11-25 04:15:34

在图像上添加不透明度

回答

相关问题