0
192
Views¿Cómo colocar Glass sobre la roca?
Estoy tratando de responder el vidrio con roca usando un javascript personalizado y TailwindCss. Necesito colocar el vaso sobre la roca en todos los puntos de ruptura.
El vidrio debe colocarse así: 
Código:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <div> <div class="text-center relative"> <div class="mx-auto w-48 h-auto mb-2 relative mb-4 shadow-inset "> <img src="https://i.ibb.co/qjqqmQ0/glass-7-web-removebg-preview-2.png" class="glass_icon object-cover w-full h-96" alt=""> </div> </div> </div> </body> <script> const body = document.querySelector("body"); body.style.background = `url('https://harvest-selection.netlify.app/assets/background/In-Woods.gif') no-repeat fixed 50% 100%`; body.style.cssText += `background-size: cover;height:100vh`; </script> </html>
·
Juan Pablo Isaza
2 answers
Answer question0
No sé si lo entendí bien. ¿Tú crees?
body { width: 100vw; height: auto; position: relative; margin: 0 auto; } body > img { width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url(https://i.ibb.co/qjqqmQ0/glass-7-web-removebg-preview-2.png) no-repeat center/40%; display: inline-block; } <body> <div class="overlay"></div> <img src="https://harvest-selection.netlify.app/assets/background/In-Woods.gif"> </body>
·
Juan Pablo Isaza
Report
0
.glass{ background: url("https://i.ibb.co/qjqqmQ0/glass-7-web-removebg-preview-2.png") 43% 180px no-repeat, url("https://harvest-selection.netlify.app/assets/background/In-Woods.gif") left top no-repeat; padding: 15px; background-size: 100px, 100%; height: 400px; } <div> <div class="text-center relative"> <div class="glass"> </div> </div> </div>
·
Juan Pablo Isaza
Report
Answer question