我正在直接指向這裏。 我想在圖像中創建一個簡單的窗口。窗口外部的 將具有不透明度,就像樣本圖片上的不透明度。在圖像上添加不透明度
對於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/
在此先感謝。
開平!!它違反了這個計算器規則嗎?!你應該自己做。不要問問題讓別人完成整件事情。 –
@sherlyfebrianti,OP已經發布了他們的嘗試,我wouldnt考慮這個要求人們做本身的整個事情 – haxxxton
@sherlyfebrianti對不起。我嘗試了一些東西,但沒有放置所有東西..我有一個標題,但這需要不透明度..但是我無法真正弄清楚如何製作圖像的兩面。 –