次の画像のような素敵なオーバーレイを追加するにはどうすればよいですか?
次の HTML を考えてみましょう。そのようなオーバーレイを追加するにはどうすればよいでしょうか? その上にグラデーションを使用して斜めに適用できることは知っていますが、曲線も同様に使用できますか?
<div class="photostrip">
<div class="overlay" />
<img src="http://i.imgur.com/a21tM.jpg" />
<img src="http://i.imgur.com/a21tM.jpg" />
<img src="http://i.imgur.com/a21tM.jpg" />
</div>
これは私が試したものです(簡単に見られるようにオーバーレイを過飽和にしています) が、探している形状とはまったく異なります。
body { background-color: #4b74db; }
.photostrip {
margin: 0 auto;
width: 185px;
background-color: #000;
box-shadow: 0px 3px 7px 3px #333;
padding: 7px;
padding-bottom: 2px;
position: relative;
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
border-bottom-right-radius: 200px 403px;
/* This adds the nice overlay. */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.60) 0%,rgba(255,255,255,0.05) 100%);
}
img {
display: block;
width: 175px;
height: 120px;
margin: 0 auto;
margin-top: 6px;
margin-bottom: 11px;
}
}