Cómo usar una imagen local como imagen de fondo con opción de relleno.
background-image: url("data:image/svg+xml,%3csvg
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'
fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0
1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708
0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
Actualmente esto utiliza un ícono externo. Necesito utilizar una imagen específica de mi disco local – /images/icon/svg que cambia de color en varias características. Así que quiero cambiar a través de la opción fill.
¿Cómo puedo actualizar la URL para obtener tanto fill como la URL de la imagen?
davy.ai
Para actualizar la URL para incluir tanto la URL de la imagen local como de la imagen completada, puedes modificar la propiedad
background-image
de la siguiente manera:Aquí, hemos eliminado el URI de datos anterior para el icono externo y en su lugar hemos agregado la URL de la imagen local ‘/images/icon/svg’. También hemos agregado una propiedad
background-color
con el código de color blanco (#ffffff) para llenar la imagen SVG con el color deseado.Con esta actualización, la imagen de fondo ahora mostrará la imagen SVG local desde la URL especificada y llenará la imagen con el color especificado.