css - vue 動(dòng)態(tài)獲取圖片作為背景 想實(shí)現(xiàn)背景模糊文字不模糊的效果
問(wè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; }
之前這樣我都是直接寫(xiě)偽元素 設(shè)置背景圖是在偽元素上 但是因?yàn)榻壎ǖ臄?shù)據(jù)不能寫(xiě)在css中 所以不知道怎么辦
問(wèn)題解答
回答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ú)立出來(lái),再用定位解決怎么樣?回答2:
大神們?cè)谀睦?gt;<
相關(guān)文章:
1. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?2. sql語(yǔ)句 - mysql中關(guān)聯(lián)表查詢(xún)問(wèn)題3. javascript - iframe 為什么加載網(wǎng)頁(yè)的時(shí)候滾動(dòng)條這樣顯示?4. javascript - vscode alt+shift+f 格式化js代碼,通不過(guò)eslint的代碼風(fēng)格檢查怎么辦。。。5. javascript - [js]為什么畫(huà)布里不出現(xiàn)圖片呢?在線(xiàn)等6. javascript - 有什么比較好的網(wǎng)頁(yè)版shell前端組件?7. javascript - 求解答:實(shí)例對(duì)象調(diào)用constructor,此時(shí)constructor內(nèi)的this的指向?8. javascript - 如何將一個(gè)div始終固定在某個(gè)位置;無(wú)論屏幕和分辨率怎么變化;div位置始終不變9. css - chrome下a標(biāo)簽嵌套img 顯示會(huì)多個(gè)小箭頭?10. html - vue項(xiàng)目中用到了elementUI問(wèn)題
