En mi aplicación vue , quiero agregar una imagen de fondo dinámica como una pseudoclase, así que traté de hacer esto:
<div id="myContent" :style="{ '--bgImage': content.icon.url }"> ...some content here </div>luego en la sección de estilo del componente:
#myContent { &:after { content: ''; background: url(var(--bgImage)); background-size: contain; background-repeat: no-repeat; background-position: top left; width: 40vw; height: 100%; position: absolute; top: 0; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; transform: translateY(-0vh); } }Pero esto no funciona. ¿Como puedo resolver esto?
Tienes que mover la parte url() a css var, entonces debería funcionar:
https://jsfiddle.net/wubqt7xe/
<div id="app"> <div id="myContent" :style="{ '--bgImage': `url('${content.icon.url}')` }"> ...some content here </div> </div> #myContent { &:after { content: ''; background: var(--bgImage); background-size: contain; background-repeat: no-repeat; background-position: top left; width: 40vw; height: 100%; position: absolute; top: 0; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; transform: translateY(-0vh); } }