css - vue 動態(tài)獲取圖片作為背景 想實現(xiàn)背景模糊文字不模糊的效果
問題描述

template> <p v-bind:style='{backgroundImage: ’url(’ + albumpic_big + ’)’}'><!-- {{albumpic_big}}--> <p class='header'> <ul> <li class='icon'> <img src='http://www.leifengta.com.cn/img/unfold.svg'> </li> <li class='songName'> {{songName}} </li> <li class='icon'> <img src='http://www.leifengta.com.cn/img/more.svg'> </li> </ul></p><p>-{{singer}}-</p> </p></template> #playPage{width: 100%;height: 100%;position: relative; } #playPage.blur{position: absolute;top: 0;left: 0;background-size:cover;filter: blur(8px) } #playPage:before{content: ’’;position: absolute;width: 100%;height: 100%;top: 0;left: 0;bottom: 0;right: 0;filter: blur(7px);z-index: -1; }
之前這樣我都是直接寫偽元素 設(shè)置背景圖是在偽元素上 但是因為綁定的數(shù)據(jù)不能寫在css中 所以不知道怎么辦
問題解答
回答1:<p v-bind:style='{backgroundImage: ’url(’ + albumpic_big + ’)’}'></p><p class='header'> <ul> <li class='icon'> <img src='http://www.leifengta.com.cn/img/unfold.svg'> </li> <li class='songName'> {{songName}} </li> <li class='icon'> <img src='http://www.leifengta.com.cn/img/more.svg'> </li> </ul></p><p>-{{singer}}-</p>讓文字內(nèi)容獨立出來,再用定位解決怎么樣?回答2:
大神們在哪里><
相關(guān)文章:
1. node.js - mongodb查找子對象的名稱為某個值的對象的方法2. html5 - datatables 加載不出來數(shù)據(jù)。3. 測試自動化html元素選擇器元素ID或DataAttribute [關(guān)閉]4. html5和Flash對抗是什么情況?5. 利用IPMI遠程安裝centos報錯!6. javascript - QQ第三方登錄的問題7. 在mac下出現(xiàn)了兩個docker環(huán)境8. 運行python程序時出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯誤?9. spring-mvc - spring-session-redis HttpSessionListener失效10. 正在使用electron和node.js做桌面應(yīng)用,需要實時監(jiān)聽是否有網(wǎng)絡(luò)連接,node或者electron是否可以做到

網(wǎng)公網(wǎng)安備