私はここでポイントにまっすぐに行くつもりです。 イメージ内に単純なウィンドウを作成したいと思います。ウィンドウ外にある は、サンプル画像のように不透明になります。イメージに不透明度を追加してください
私は本当にうまくいかないので、私に同行してください。
.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/
感謝。
ヘイ!このstackoverflow規制違反ですか?あなたは自分でそれを行うべきです。他の人によって行われたすべてのことを得るために質問をすることはありません。 –
@ sherlyfebrianti、OPは彼らの試行を投稿しました。私はこのことを全員でやってくれると考えています。 – haxxxton
@sherlyfebriantiはこれを残念に思っています。私は何かを試しましたが、すべてを入れていませんでした。ヘッダーがありますが、それは不透明です。しかし、私は実際にイメージの両面を作る方法を理解できません。 –