0
A
回答
1
我在工作空閒的時間,所以這裏是你在找什麼(jsFiddle)的例子:
[ - ] HTML
<div class="wrapper">
<div class="container">
<img src="http://pipsum.com/200x150.jpg">
</div>
<div class="container">
<img src="http://placekitten.com/200/150">
</div>
</div>
[ - ] js
$('img', '.container').each(function(){
var $this = $(this);
$this.clone().addClass('top').insertBefore($this);
$this.clone().addClass('mid').insertBefore($this);
$this.addClass('bot');
});
[ - ] CSS
body { background: black; padding: 20px; }
.container { position: relative; display: inline-block; margin-right: 20px; width: 200px; }
.container img { display: block; border-radius: 6px 6px 0 0; }
.container img.top,
.container img.mid,
.container img.bot { position: absolute; margin: auto; left: 0; right: 0; }
.container img.top,
.container img.mid { -webkit-filter: blur(.2px); }
.container img.top { opacity: .8; width: 80%; z-index: 0; -webkit-filter: brightness(80%); }
.container img.mid { top: 10px; opacity: .5; width: 90%; z-index: 1; }
.container img.bot { top: 20px; z-index: 2; }
'CSS filter'會幫助你 - https://developer.mozilla.org/en-US/docs/Web/CSS /過濾 – kosmos
順便說一句你到目前爲止嘗試了什麼?你有沒有什麼好工作? – kosmos
不..我沒有css過濾器的工作經驗。 :( –