¿Cómo puedo usar una imagen PNG transparente en lugar de recortar el svg? Por favor, ayuda, necesito una imagen PNG transparente en lugar de un círculo.
Aquí está el Javascript
var section = document.querySelector('section'); window.addEventListener('scroll', function(){ var value = window.scrollY; section.style.clipPath = "circle("+ value +"px at center)" })¡Gracias!
Si entendí el problema correctamente, debe cambiar la sección CSS como background: url(/yourlink);
Puede ser especificando el width de la height y dando border-radius a la imagen.
Y cambio de valor en desplazamiento
var section = document.querySelector('section'); window.addEventListener('scroll', function(){ var value = window.scrollY; section.style.height = value +"px" section.style.width = value +"px" }) * { margin: 0; padding: 0; box-sizing: border-box; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; } section { position: fixed; top: 0; left: 0; /*width: 100%; height: 100vh;*/ background: url(https://www.prixgen.com/wp-content/uploads/2018/04/mission.jpg); background-size: contain; background-attachment: fixed; border-radius:500px; } .container { position: relative; margin-top: 200vh; background: #fff; padding: 100px; } .container h2 { font-size: 2.5em; } .title { position: relative; top: 250px; z-index: 1; font-size: 2em; text-align: center; width: 100%; } <!doctype html> <html> <head> <meta charset="utf-8"> <title>Join us</title> </head> <body> <h2 class="title">Join us for Better Future</h2> <section></section> <div class="container"> </div> </body> </html>