css - vue 动态获取图片作为背景 想实现背景模糊文字不模糊的效果
问题描述
template> <p v-bind:style='{backgroundImage: ’url(’ + albumpic_big + ’)’}'><!-- {{albumpic_big}}--> <p class='header'> <ul> <li class='icon'> <img src='https://www.haobala.com/img/unfold.svg'> </li> <li class='songName'> {{songName}} </li> <li class='icon'> <img src='https://www.haobala.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='https://www.haobala.com/img/unfold.svg'> </li> <li class='songName'> {{songName}} </li> <li class='icon'> <img src='https://www.haobala.com/img/more.svg'> </li> </ul></p><p>-{{singer}}-</p>让文字内容独立出来,再用定位解决怎么样?回答2:
大神们在哪里><
相关文章:
1. 代码如下,java用BigDecimal四舍五入怎么还有问题呀?哪种方式是完全没有问题的?2. angular.js - 请教angularjs里html和js通信的问题3. node.js - 怎么在初始化的时候使得一个子组件不加载?4. javascript - 关于向java后台上传base64位字符串的图片数据,求助5. android自带时钟应用的这个效果是怎么做的6. mysql根据某个字段已存在的值排序7. 求解决方法:Parse error: syntax error, unexpected8. 新人做网站求帮助9. Help!求帮助10. 请问“由于 Cookie “PHPSESSID”的“SameSite”属性设置为“None”,但缺少“Secure”属性,此 Cookie 未来将被拒绝。”请问出现这个问题怎么办?