1. Cómo hacer que el fondo del video sea transparente
Durante el desarrollo web, algunos efectos especiales interactivos son más complicados y desea utilizar el video para lograrlo, pero hay un problema con el color de fondo del video. No puede ser transparente. Como resultado, los diseñadores deben combinar con el fondo al hacer videos. El costo de desarrollo sigue siendo bastante alto y el mantenimiento es un dolor de cabeza. ¿Hay alguna buena manera de hacer que el color de fondo de un video MP4 sea transparente?
¡Tener!
Podemos salvar el país con la curva de atributo CSS mix-blend-mode .
mix-blend-modeUno de los modos de fusión se llama Filtro de Color, la palabra es screen, tiene una característica muy interesante, es decir, cuando el negro se mezcla con otros elementos, aparece transparente.
Así que queremos lograr un efecto transparente de color de fondo de video es muy simple, siempre que el color de fondo de nuestro video esté configurado en negro, y al mismo tiempo configure el siguiente CSS:
video {
mix-blend-mode: screen;
}
P.ej:
Aquí hay un mapa base:
Luego hay un video lloviendo (haga clic si no está reproduciendo):
En este punto, superponemos el video sobre la imagen simple y configuramos el modo de fusión del video en la pantalla, puede ver que el fondo del video se ha vuelto transparente y el efecto dinámico de la lluvia está bien presentado en la imagen inferior, como se muestra a continuación Mostrar (haga clic si no está reproduciendo) (renderizado en tiempo real, efecto en un navegador que no sea IE):
¡Es así de simple!
Se puede utilizar en todos los proyectos que no necesitan ser compatibles con el navegador IE.
¡Creo que debes haber aprendido esta habilidad CONSEJOS!
2. Conclusión
Para una comprensión profunda de la pantalla de filtro, puede consultar este artículo: " Comprensión en profundidad del modo de combinación de pantalla de filtro de modo de mezcla-combinación de CSS ".
Vista previa, los artículos se actualizarán en las próximas dos semanas, ¡esté preparado!