0
242
Viewsel desenfoque del filtro desborda CSS
el desenfoque del filtro se desborda en el encabezado y la barra lateral. Se ve feo ("desbordamiento: oculto" no funciona)
¿Cómo arreglo el desbordamiento?
HTML:
<div class="subscribe"> <div class="subscribe__content"> <div class="subscribe__left"> <h2>Subscribe</h2> <input type="text" class="subscribe__field" placeholder="Name"> <input type="button" class="subscribe__btn" value="Submit"> </div> <div class="subscribe__right"> </div> </div> </div>CSS:
.subscribe{ position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 20px 100px; &::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('https://i.hurimg.com/i/hdn/75/0x0/5de62c4a0f25441e58232693.jpg') no-repeat center; background-size: cover; filter: blur(25px); opacity: 0.8; } } 
·
Juan Pablo Isaza
1 answers
Answer question0
Reestructuré sus estilos para establecer background-image en el elemento y usar un backdrop-filter en su elemento ::before . De esa manera, las esquinas siempre estarán nítidas, pero el filtro de blur aún se aplicará en el fondo.
Además, asegúrese de que su .subscribe__content tenga z-index mayor que .subscribe::before .
.subscribe { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 20px 100px; background: url('https://i.hurimg.com/i/hdn/75/0x0/5de62c4a0f25441e58232693.jpg') no-repeat center; background-size: cover; opacity: 0.8; &::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; backdrop-filter: blur(25px); z-index: 10; } &__content { z-index: 20; } }
·
Juan Pablo Isaza
Report
Answer question