css - vue 動(dòng)態(tài)獲取圖片作為背景 想實(shí)現(xiàn)背景模糊文字不模糊的效果
問題描述
template> <p v-bind:style='{backgroundImage: ’url(’ + albumpic_big + ’)’}'><!-- {{albumpic_big}}--> <p class='header'> <ul> <li class='icon'> <img src='http://www.intensediesel.com/img/unfold.svg'> </li> <li class='songName'> {{songName}} </li> <li class='icon'> <img src='http://www.intensediesel.com/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è)置背景圖是在偽元素上 但是因?yàn)榻壎ǖ臄?shù)據(jù)不能寫在css中 所以不知道怎么辦
問題解答
回答1:<p v-bind:style='{backgroundImage: ’url(’ + albumpic_big + ’)’}'></p><p class='header'> <ul> <li class='icon'> <img src='http://www.intensediesel.com/img/unfold.svg'> </li> <li class='songName'> {{songName}} </li> <li class='icon'> <img src='http://www.intensediesel.com/img/more.svg'> </li> </ul></p><p>-{{singer}}-</p>讓文字內(nèi)容獨(dú)立出來,再用定位解決怎么樣?回答2:
大神們在哪里><
相關(guān)文章:
1. javascript - JS設(shè)置Video視頻對象的currentTime時(shí)出現(xiàn)了問題,IE,Edge,火狐,都可以設(shè)置,反而chrom卻...2. java固定鍵值轉(zhuǎn)換,使用枚舉實(shí)現(xiàn)字典?3. 如何為每個(gè)應(yīng)用程序配置tomcat 6的logs / catalina.out。(為sys.out,sys.err配置Web應(yīng)用程序特定的日志文件)4. css - ionic中的柵格布局如何讓文字內(nèi)容多少不同的每一列中的內(nèi)容都能垂直居中?5. php自學(xué)從哪里開始?6. phpstady在win10上運(yùn)行7. java - 我設(shè)置了cookie的max age,但是cookie依然在關(guān)閉游覽器后消失了8. python - flask學(xué)習(xí),user_syy添加報(bào)role is invalid keyword for User.9. 這是什么情況???10. javascript - 用jsonp抓取qq音樂總是說回調(diào)函數(shù)沒有定義
