0
287
ViewsDesenfoque de fondo de un elemento HTML que tiene contenido detrás
Vercel.com tiene este agradable efecto en su encabezado donde es parcialmente opaco y tiene un efecto de desenfoque:
Quiero recrear este efecto en la barra de navegación de mi sitio, pero no estoy seguro de cómo hacerlo. He intentado buscar, pero los únicos resultados que obtengo son acerca de desenfocar una imagen de fondo .
Traté de inspeccionar el CSS del sitio, pero la única línea interesante que encontré fue backdrop-filter: saturate(180%) blur(5px); , pero esto no parece hacer nada, vea los fragmentos:
Con backdrop-filter: saturate(180%) blur(5px); :
* { padding: 0; margin: 0; font-family: Segoe UI, sans-serif; } header { position: fixed; z-index: 999; width: 100%; height: 30px; background: black; color: white; opacity: 0.7; backdrop-filter: saturate(180%) blur(5px); } main { background: red; } <header> Header </header> <main> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Est ante in nibh mauris cursus mattis molestie. Nisl purus in mollis nunc sed. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Dolor morbi non arcu risus. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Est ante in nibh mauris cursus mattis molestie. Varius morbi enim nunc faucibus. Volutpat ac tincidunt vitae semper quis. Lectus quam id leo in vitae. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Morbi tempus iaculis urna id volutpat lacus laoreet. Elementum integer enim neque volutpat ac tincidunt. Ut pharetra sit amet aliquam id diam. Tincidunt nunc pulvinar sapien et ligula. Rhoncus aenean vel elit scelerisque mauris. Nec feugiat nisl pretium fusce id velit ut. Sed odio morbi quis commodo. Id ornare arcu odio ut sem nulla pharetra diam. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Molestie a iaculis at erat pellentesque. Justo eget magna fermentum iaculis eu non. Cursus turpis massa tincidunt dui ut. Volutpat maecenas volutpat blandit aliquam. Varius duis at consectetur lorem donec massa sapien faucibus et. Etiam non quam lacus suspendisse faucibus interdum posuere. Aliquet enim tortor at auctor urna nunc id. Porta non pulvinar neque laoreet. Ut placerat orci nulla pellentesque dignissim enim sit. Mi sit amet mauris commodo quis imperdiet massa. Elementum facilisis leo vel fringilla est. Non odio euismod lacinia at. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Scelerisque purus semper eget duis at tellus. Scelerisque viverra mauris in aliquam sem fringilla. Consequat mauris nunc congue nisi. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Aliquam nulla facilisi cras fermentum odio. Tortor pretium viverra suspendisse potenti nullam ac tortor. Bibendum arcu vitae elementum curabitur vitae. Pretium aenean pharetra magna ac. Felis donec et odio pellentesque diam volutpat commodo. Lobortis feugiat vivamus at augue eget. Egestas fringilla phasellus faucibus scelerisque. Turpis nunc eget lorem dolor. Congue quisque egestas diam in arcu. Massa tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in massa. Sed enim ut sem viverra. Congue quisque egestas diam in arcu cursus euismod quis viverra. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Id eu nisl nunc mi. Penatibus et magnis dis parturient. Condimentum mattis pellentesque id nibh tortor. Mollis aliquam ut porttitor leo a. Vulputate dignissim suspendisse in est ante in nibh. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Turpis nunc eget lorem dolor sed viverra. Fringilla phasellus faucibus scelerisque eleifend donec. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Diam vel quam elementum pulvinar etiam non quam lacus. Lacus luctus accumsan tortor posuere ac ut consequat. Posuere morbi leo urna molestie at elementum eu facilisis sed. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Blandit cursus risus at ultrices mi. Eget nulla facilisi etiam dignissim diam quis. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Ut sem nulla pharetra diam sit amet. Orci dapibus ultrices in iaculis nunc. Condimentum lacinia quis vel eros. Ultrices eros in cursus turpis. Pretium fusce id velit ut tortor. Lectus proin nibh nisl condimentum id. Feugiat vivamus at augue eget arcu. Sem viverra aliquet eget sit amet tellus. Quis lectus nulla at volutpat diam. </main> Sin backdrop-filter: saturate(180%) blur(5px); :
* { padding: 0; margin: 0; font-family: Segoe UI, sans-serif; } header { position: fixed; z-index: 999; width: 100%; height: 30px; background: black; color: white; opacity: 0.7; /* backdrop-filter: saturate(180%) blur(5px); */ } main { background: red; } <header> Header </header> <main> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Est ante in nibh mauris cursus mattis molestie. Nisl purus in mollis nunc sed. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Dolor morbi non arcu risus. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Est ante in nibh mauris cursus mattis molestie. Varius morbi enim nunc faucibus. Volutpat ac tincidunt vitae semper quis. Lectus quam id leo in vitae. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Morbi tempus iaculis urna id volutpat lacus laoreet. Elementum integer enim neque volutpat ac tincidunt. Ut pharetra sit amet aliquam id diam. Tincidunt nunc pulvinar sapien et ligula. Rhoncus aenean vel elit scelerisque mauris. Nec feugiat nisl pretium fusce id velit ut. Sed odio morbi quis commodo. Id ornare arcu odio ut sem nulla pharetra diam. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Molestie a iaculis at erat pellentesque. Justo eget magna fermentum iaculis eu non. Cursus turpis massa tincidunt dui ut. Volutpat maecenas volutpat blandit aliquam. Varius duis at consectetur lorem donec massa sapien faucibus et. Etiam non quam lacus suspendisse faucibus interdum posuere. Aliquet enim tortor at auctor urna nunc id. Porta non pulvinar neque laoreet. Ut placerat orci nulla pellentesque dignissim enim sit. Mi sit amet mauris commodo quis imperdiet massa. Elementum facilisis leo vel fringilla est. Non odio euismod lacinia at. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Scelerisque purus semper eget duis at tellus. Scelerisque viverra mauris in aliquam sem fringilla. Consequat mauris nunc congue nisi. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Aliquam nulla facilisi cras fermentum odio. Tortor pretium viverra suspendisse potenti nullam ac tortor. Bibendum arcu vitae elementum curabitur vitae. Pretium aenean pharetra magna ac. Felis donec et odio pellentesque diam volutpat commodo. Lobortis feugiat vivamus at augue eget. Egestas fringilla phasellus faucibus scelerisque. Turpis nunc eget lorem dolor. Congue quisque egestas diam in arcu. Massa tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in massa. Sed enim ut sem viverra. Congue quisque egestas diam in arcu cursus euismod quis viverra. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Id eu nisl nunc mi. Penatibus et magnis dis parturient. Condimentum mattis pellentesque id nibh tortor. Mollis aliquam ut porttitor leo a. Vulputate dignissim suspendisse in est ante in nibh. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Turpis nunc eget lorem dolor sed viverra. Fringilla phasellus faucibus scelerisque eleifend donec. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Diam vel quam elementum pulvinar etiam non quam lacus. Lacus luctus accumsan tortor posuere ac ut consequat. Posuere morbi leo urna molestie at elementum eu facilisis sed. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Blandit cursus risus at ultrices mi. Eget nulla facilisi etiam dignissim diam quis. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Ut sem nulla pharetra diam sit amet. Orci dapibus ultrices in iaculis nunc. Condimentum lacinia quis vel eros. Ultrices eros in cursus turpis. Pretium fusce id velit ut tortor. Lectus proin nibh nisl condimentum id. Feugiat vivamus at augue eget arcu. Sem viverra aliquet eget sit amet tellus. Quis lectus nulla at volutpat diam. </main> Stack Snippets ni siquiera reconoce la propiedad CSS backdrop-filter , en el editor está coloreada en rojo, aunque hay un artículo en MDN para ello:
La propiedad CSS
backdrop-filterle permite aplicar efectos gráficos como desenfoque o cambio de color al área detrás de un elemento. Debido a que se aplica a todo lo que hay detrás del elemento, para ver el efecto debe hacer que el elemento o su fondo sean al menos parcialmente transparentes.
¿Cómo puedo lograr este efecto de fondo borroso en CSS?
·
Santiago Trujillo
2 answers
Answer question0
* { padding: 0; margin: 0; font-family: Segoe UI, sans-serif; } header { position: fixed; z-index: 999; width: 100%; height: 50px; background: rgba(255,255,255,.2); color: white; backdrop-filter: saturate(180%) blur(2px); } main { background: red; } <header> Header </header> <main> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Est ante in nibh mauris cursus mattis molestie. Nisl purus in mollis nunc sed. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Dolor morbi non arcu risus. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Est ante in nibh mauris cursus mattis molestie. Varius morbi enim nunc faucibus. Volutpat ac tincidunt vitae semper quis. Lectus quam id leo in vitae. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Morbi tempus iaculis urna id volutpat lacus laoreet. Elementum integer enim neque volutpat ac tincidunt. Ut pharetra sit amet aliquam id diam. Tincidunt nunc pulvinar sapien et ligula. Rhoncus aenean vel elit scelerisque mauris. Nec feugiat nisl pretium fusce id velit ut. Sed odio morbi quis commodo. Id ornare arcu odio ut sem nulla pharetra diam. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Molestie a iaculis at erat pellentesque. Justo eget magna fermentum iaculis eu non. Cursus turpis massa tincidunt dui ut. Volutpat maecenas volutpat blandit aliquam. Varius duis at consectetur lorem donec massa sapien faucibus et. Etiam non quam lacus suspendisse faucibus interdum posuere. Aliquet enim tortor at auctor urna nunc id. Porta non pulvinar neque laoreet. Ut placerat orci nulla pellentesque dignissim enim sit. Mi sit amet mauris commodo quis imperdiet massa. Elementum facilisis leo vel fringilla est. Non odio euismod lacinia at. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Scelerisque purus semper eget duis at tellus. Scelerisque viverra mauris in aliquam sem fringilla. Consequat mauris nunc congue nisi. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Aliquam nulla facilisi cras fermentum odio. Tortor pretium viverra suspendisse potenti nullam ac tortor. Bibendum arcu vitae elementum curabitur vitae. Pretium aenean pharetra magna ac. Felis donec et odio pellentesque diam volutpat commodo. Lobortis feugiat vivamus at augue eget. Egestas fringilla phasellus faucibus scelerisque. Turpis nunc eget lorem dolor. Congue quisque egestas diam in arcu. Massa tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in massa. Sed enim ut sem viverra. Congue quisque egestas diam in arcu cursus euismod quis viverra. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Id eu nisl nunc mi. Penatibus et magnis dis parturient. Condimentum mattis pellentesque id nibh tortor. Mollis aliquam ut porttitor leo a. Vulputate dignissim suspendisse in est ante in nibh. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Turpis nunc eget lorem dolor sed viverra. Fringilla phasellus faucibus scelerisque eleifend donec. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Diam vel quam elementum pulvinar etiam non quam lacus. Lacus luctus accumsan tortor posuere ac ut consequat. Posuere morbi leo urna molestie at elementum eu facilisis sed. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Blandit cursus risus at ultrices mi. Eget nulla facilisi etiam dignissim diam quis. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Ut sem nulla pharetra diam sit amet. Orci dapibus ultrices in iaculis nunc. Condimentum lacinia quis vel eros. Ultrices eros in cursus turpis. Pretium fusce id velit ut tortor. Lectus proin nibh nisl condimentum id. Feugiat vivamus at augue eget arcu. Sem viverra aliquet eget sit amet tellus. Quis lectus nulla at volutpat diam. </main>Aquí hay un fragmento de trabajo. Creo que la opacidad rompió el filtro de fondo. Agregar un color de fondo con rgba (255,255,255, .2) lo arregló. Acabo de ajustar los valores para un mejor efecto.
·
Santiago Trujillo
Report
0
Bien, probé un montón de cosas y esto es lo que descubrí:
- El filtro de fondo no funciona (todavía no es compatible) en el navegador Firefox.
- El filtro de fondo no funciona (o no funciona bien) con la propiedad CSS de opacidad .
- Para que funcione (en los navegadores compatibles como Chrome), debe agregar la opacidad en el color de fondo, por lo que, en lugar de codificarlo de esta manera:
background: #000000; opacity: 0.7;Estarías haciendo algo como esto:
background-color: #000000a1; /* OR */ background-color: hsla(0, 0%, 0%, 0.631); /* OR */ background-color: rgba(0, 0, 0, 0.631);Cambié un poco tu código, para que se vea un poco más claro. Eliminé el fondo rojo y agregué un fondo gris claro con texto negro y también eliminé el índice z y el ancho y lo reemplacé con un relleno .
Así que el resultado final sería:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { padding: 0; margin: 0; font-family: Segoe UI, sans-serif; } header { position: fixed; width: 100%; padding: 10px; background: rgba(0, 0, 0, 0.692); color: white; backdrop-filter: saturate(90%) blur(1px); } main { background: #eeeeee; font-weight: 600; } </style> </head> <body> <header>Header</header> <main> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Est ante in nibh mauris cursus mattis molestie. Nisl purus in mollis nunc sed. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Dolor morbi non arcu risus. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Est ante in nibh mauris cursus mattis molestie. Varius morbi enim nunc faucibus. Volutpat ac tincidunt vitae semper quis. Lectus quam id leo in vitae. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Morbi tempus iaculis urna id volutpat lacus laoreet. Elementum integer enim neque volutpat ac tincidunt. Ut pharetra sit amet aliquam id diam. Tincidunt nunc pulvinar sapien et ligula. Rhoncus aenean vel elit scelerisque mauris. Nec feugiat nisl pretium fusce id velit ut. Sed odio morbi quis commodo. Id ornare arcu odio ut sem nulla pharetra diam. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Molestie a iaculis at erat pellentesque. Justo eget magna fermentum iaculis eu non. Cursus turpis massa tincidunt dui ut. Volutpat maecenas volutpat blandit aliquam. Varius duis at consectetur lorem donec massa sapien faucibus et. Etiam non quam lacus suspendisse faucibus interdum posuere. Aliquet enim tortor at auctor urna nunc id. Porta non pulvinar neque laoreet. Ut placerat orci nulla pellentesque dignissim enim sit. Mi sit amet mauris commodo quis imperdiet massa. Elementum facilisis leo vel fringilla est. Non odio euismod lacinia at. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Scelerisque purus semper eget duis at tellus. Scelerisque viverra mauris in aliquam sem fringilla. Consequat mauris nunc congue nisi. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Aliquam nulla facilisi cras fermentum odio. Tortor pretium viverra suspendisse potenti nullam ac tortor. Bibendum arcu vitae elementum curabitur vitae. Pretium aenean pharetra magna ac. Felis donec et odio pellentesque diam volutpat commodo. Lobortis feugiat vivamus at augue eget. Egestas fringilla phasellus faucibus scelerisque. Turpis nunc eget lorem dolor. Congue quisque egestas diam in arcu. Massa tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in massa. Sed enim ut sem viverra. Congue quisque egestas diam in arcu cursus euismod quis viverra. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Id eu nisl nunc mi. Penatibus et magnis dis parturient. Condimentum mattis pellentesque id nibh tortor. Mollis aliquam ut porttitor leo a. Vulputate dignissim suspendisse in est ante in nibh. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Turpis nunc eget lorem dolor sed viverra. Fringilla phasellus faucibus scelerisque eleifend donec. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Diam vel quam elementum pulvinar etiam non quam lacus. Lacus luctus accumsan tortor posuere ac ut consequat. Posuere morbi leo urna molestie at elementum eu facilisis sed. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Blandit cursus risus at ultrices mi. Eget nulla facilisi etiam dignissim diam quis. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Ut sem nulla pharetra diam sit amet. Orci dapibus ultrices in iaculis nunc. Condimentum lacinia quis vel eros. Ultrices eros in cursus turpis. Pretium fusce id velit ut tortor. Lectus proin nibh nisl condimentum id. Feugiat vivamus at augue eget arcu. Sem viverra aliquet eget sit amet tellus. Quis lectus nulla at volutpat diam. </main> </body> </html>
·
Santiago Trujillo
Report
Answer question