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; } }
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; } }