Tengo algunos problemas al aplicar el filtro de fondo a algunos componentes del sitio web. Me parece que esta propiedad funciona bien en la mayoría de las ocasiones, sin embargo, hay algunos casos en los que no veo ningún cambio en el diseño y no se aplica el desenfoque. Actualmente, estoy usando Google Chrome para ver mi sitio web, por lo que la compatibilidad no debería ser un problema. Encuentre el código aplicado a continuación.
HTML:
<div class="content"> <h1 class="hero-title">Castles.</h1> <p> Glasgow Science Centre is a visitor attraction on the south bank of the River Clyde in Glasgow, Scotland, in the Clyde Waterfront Regeneration region. The Glasgow Science Centre was inaugurated by Queen Elizabeth II on July 5, 2001. It is one of the most popular paid-for tourist attractions in Scotland. </p> </div>CSS:
.content p { font-size: 18px; margin: 3rem 0; font-weight: 300; position: relative; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(2rem); -webkit-backdrop-filter: blur(2rem); }No hay problema con su código, pero Mozilla e Internet Explorer no son compatibles con la propiedad de filtro de fondo. Puede consultar el enlace para ver la compatibilidad del navegador .
.content{ background-image: url(https://picsum.photos/900/300), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-size:contain; padding:100px; } .content p { padding:10px; font-size: 18px; margin: 3rem 0; font-weight: 300; position: relative; color:#fff; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(2rem); -webkit-backdrop-filter: blur(2rem); } <div class="content"> <h1 class="hero-title">Castles.</h1> <p> Glasgow Science Centre is a visitor attraction on the south bank of the River Clyde in Glasgow, Scotland, in the Clyde Waterfront Regeneration region. The Glasgow Science Centre was inaugurated by Queen Elizabeth II on July 5, 2001. It is one of the most popular paid-for tourist attractions in Scotland. </p> </div>