css - vue 動態獲取圖片作為背景 想實現背景模糊文字不模糊的效果
問題描述
template> <p v-bind:style='{backgroundImage: ’url(’ + albumpic_big + ’)’}'><!-- {{albumpic_big}}--> <p class='header'> <ul> <li class='icon'> <img src='http://www.aoyou183.cn/img/unfold.svg'> </li> <li class='songName'> {{songName}} </li> <li class='icon'> <img src='http://www.aoyou183.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; }
之前這樣我都是直接寫偽元素 設置背景圖是在偽元素上 但是因為綁定的數據不能寫在css中 所以不知道怎么辦
問題解答
回答1：<p v-bind:style='{backgroundImage: ’url(’ + albumpic_big + ’)’}'></p><p class='header'> <ul> <li class='icon'> <img src='http://www.aoyou183.cn/img/unfold.svg'> </li> <li class='songName'> {{songName}} </li> <li class='icon'> <img src='http://www.aoyou183.cn/img/more.svg'> </li> </ul></p><p>-{{singer}}-</p>讓文字內容獨立出來,再用定位解決怎么樣？回答2：
大神們在哪里><
相關文章：
1. 數據庫 - mysql如何處理數據變化中的事務？2. 網絡傳輸協議 - 以下三種下載方式有什么不同？如何用python模擬下載器下載？3. angular.js - Angular路由和express路由的組合使用問題4. 如何修改phpstudy的phpmyadmin放到其他地方5. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？6. 表單提交驗證，沒反應，求老師指點7. 我的html頁面一提交，網頁便顯示出了我的php代碼，求問是什么原因？8. 在mac下出現了兩個docker環境9. tp6表單令牌10. javascript - canvas 可以實現 PS 魔法橡皮擦的功能嗎？
網公網安備