css - vue 動態獲取圖片作為背景 想實現背景模糊文字不模糊的效果
問題描述
template> <p v-bind:style='{backgroundImage: ’url(’ + albumpic_big + ’)’}'><!-- {{albumpic_big}}--> <p class='header'> <ul> <li class='icon'> <img src='http://www.piao2010.com/img/unfold.svg'> </li> <li class='songName'> {{songName}} </li> <li class='icon'> <img src='http://www.piao2010.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; }
之前這樣我都是直接寫偽元素 設置背景圖是在偽元素上 但是因為綁定的數據不能寫在css中 所以不知道怎么辦
問題解答
回答1:<p v-bind:style='{backgroundImage: ’url(’ + albumpic_big + ’)’}'></p><p class='header'> <ul> <li class='icon'> <img src='http://www.piao2010.com/img/unfold.svg'> </li> <li class='songName'> {{songName}} </li> <li class='icon'> <img src='http://www.piao2010.com/img/more.svg'> </li> </ul></p><p>-{{singer}}-</p>讓文字內容獨立出來,再用定位解決怎么樣?回答2:
大神們在哪里><
相關文章:
1. mysql優化 - mysql 一張表如果不能確保字段列長度一致,是不是就不需要用到char。2. mysql 怎么做到update只更新一行數據?3. 使用python中的pandas求每個值占該列的比例4. javascript - 新浪微博網頁版的字數限制是怎么做的5. python - scrapy 如何組合2個不同頁面的數據,一并存儲6. python2.7 - python 函數或者類 代碼的執行順序7. sublime可以用其他編譯器替換嗎?8. javascript - 用jsonp抓取qq音樂總是說回調函數沒有定義9. python - 多態調用方法時卻顯示bound method...10. node.js - mysql如何通過knex查詢今天和七天內的匯總數據
