最近在制作一個Vue的音樂App,遇到一個需要背景圖模糊的功能。
而且其中的圖片是動態獲取的。
像平常的話我們可以使用偽元素設置背景圖,然后使用CSS3新特性---filter(濾鏡),就可以得到想要的效果。
http://www.runoob.com/cssref/css3-pr-filter.html
但在圖片是動態獲取的時候,我們不能再偽元素中設置background-Image。所以為了得到相同的效果我們需要
把背景和內容分隔開,然后使用定位來讓內容壓著背景。其中需要注意的是其中的z-index設置。背景的z-index要比內容的低。