Es posible aplicar un efecto de desenfoque a un elemento HTML(div & img)?

Estoy desarrollando exclusivamente para el iPad por lo que la compatibilidad entre navegadores no es un problema & puedo usar HTML5 CSS3 técnicas.

Sé cómo desenfoque de texto, pero este CSS no se aplica a la real elemento HTML o en su frontera:

text-shadow: 0 0 8px #000;
color: transparent;

Busqué en google, pero no el desenfoque de la imagen en mis navegadores:

filter: blur(strength=50);
  • Estoy perplejo. +1. Sería curioso ver algunas soluciones.
InformationsquelleAutor sazr | 2011-12-15

7 Comentarios

  1. 15

    Usted puede simplemente añadir esto a tu css, para una imagen:

    En el siguiente ejemplo, vamos a usar un desenfoque con 5 píxeles de radio. Y es muy importante para el uso de todos los proveedores de prefijos disponibles, por lo que funciona en todos los navegadores con esta característica implementada, untile se trata de una «estable» de la versión.

    img{
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -ms-filter: blur(5px);
      -o-filter: blur(5px);
      filter: blur(5px);
    }
    • No se admite en estable de Firefox.
    • Me doy cuenta de tu comentario es de 14 meses de edad, pero filter:blur es compatible con Firefox.
  2. 4

    Creo que la mejor manera es la capa de la misma imagen sobre la misma un par de veces y probar diferentes posicionamiento y opacidades en el solapamiento queridos.

    Aquí está el CSS que se me ocurrió. Tenga en cuenta que estoy usando el nth-child CSS3 selector (pero no parecen tener un problema con eso):

    img {
        width:300px;
        height:300px;
        position:absolute;
        opacity:0.2;
    }
    
    .container {
        position:relative;
        overflow:hidden;
        width:300px;
        height:300px;
    }
    
    img:nth-child(1) {
        opacity:1;   
    }
    
    img:nth-child(2) {
        left:2px;
        top:2px;
    }
    
    img:nth-child(3) {
        left:-2px;
        top:-2px;
    }
    
    img:nth-child(4) {
        left:-1px;
        top:-1px;
    }
    
    img:nth-child(5) {
        left:1px;
        top:1px;
    }

    HTML:

    <div class="container">
        <img src="...">
        <img src="...">
        <img src="...">
        <img src="...">
        <img src="...">
    </div>

    El resultado es bastante prometedor.

    • Que interesante, pero un marcado pesadilla. +1.
    • Buen trabajo amigo! Acerca de la marca, @bookcasey, sí, es es una pesadilla, pero también podemos generar de forma dinámica desde el lado del servidor o con la ayuda de JS/JQuery. Así que creo que voy a estar usando este. Gracias por el fresco de violín también 😉
    • esta solución es muy complejo y sólo «simulacro» de el efecto, en lugar de tener los filtros que hacer el trabajo (como he señalado)
    • wow @DanielFilho, esta respuesta es casi 6 años de edad: ¿por qué el downvote y referencia a su respuesta, que ya tiene más upvotes? que simplemente parece desesperada. Además, esta respuesta no es realmente complicado, es más detallado que el de las otras respuestas. Esto no significa que es un mal solución de por sí, sólo una diferente, y creo que está bien objetivo para la integridad de las soluciones de Desbordamiento de Pila.
  3. 2

    CSS no tiene la capacidad para difuminar, además de las técnicas con text-shadow y box-shadow. Pero incluso con estos, las fronteras y las imágenes no son capaces de ser borrosa.

    Esta biblioteca JavaScript, sin embargo, puede manejar imágenes.

    También, usted puede encontrar esta técnica interesante. Que es un bonito ilusión el uso de pre-fabricado imágenes borrosas.

    • Esto no es estrictamente cierto, como también es box-shadow y la capacidad de la capa de desenfoque de la imagen sobre la parte superior sin necesidad de recurrir a JS.
    • He actualizado, pero siéntase libre de editar!
    • no eso es mucho más justa evaluación 🙂 +1
    • css NO tiene filtros de desenfoque.
    • Pero no lo hizo en 2011 😉
  4. 1

    He tenido bastante a fondo la investigación de este problema no hace mucho tiempo y vino para arriba con una solución sumamente flexible, aunque puede ser excesivo para las necesidades de algunas personas. Necesitaba no sólo imágenes borrosas, pero también una dinámica radio de desenfoque, de superposición de color y opacidad de superposición para los diversos tipos de imágenes. Yo también necesitaba tener la opción de sólo el desenfoque de una imagen en un fondo con otros elementos superpuestos en la parte superior de la misma. Aquí está el mejor cross-browser (y eficiente), solución que yo era capaz de crear.

    Primer lugar, me gustaría tener un SVG en la mano, uninspiringly llamado blur.svg. Se aplica un filtro de desenfoque y si se mira de cerca, el stdDeviation (que establece el radio de desenfoque) es en realidad mediante programación a partir de un pasado en el parámetro a la URL que solicita el recurso.

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
    <feGaussianBlur stdDeviation="#{params[:blur]}" />
    </filter>
    </svg>

    Luego tuve una SECS mixin que permiten añadir un desenfoque de superposición para cualquier contenedor, con un personalizables radio de desenfoque, de superposición de color y opacidad de superposición.

    @mixin background_blurred($blur_radius:4, $overlay_color:white, $overlay_opacity:0.6) {
      position: relative;
      .background_blurred {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        filter: url('blur.svg#blur?blur=#{$blur_radius}');
        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='#{$blur_radius}');
        transform: translateZ(0);
        &:after {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: $overlay_color;
          opacity: $overlay_opacity;
        }
      }
      .foreground {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
      }
    }

    Usted puede estar preguntándose por qué no se incluyó una transform: translateZ(0);. El único efecto que tiene es la fuerza de la aceleración por hardware en el render para mantener las cosas performante. Usted también puede estar preguntándose por qué no hay ningún proveedor de prefijos. Usted puede buscar cosas como filter en CanIUse si quieres, pero yo solía autoprefixer en este proyecto para preocuparse de esas cosas para mí. Y por supuesto, por el uso de este filtro SVG, en lugar de con algo como blur(4px)? ¿No sería más fácil? Sería, pero Firefox (como el de la escritura) sólo admite la filter de la propiedad con una dirección URL.

    Entonces se puede aplicar el desenfoque mixin para una clase de contenedor:

    .my_wrapper_class {
      @include background_blurred(3, #f9f7f5, 0.7);
    }

    Aviso que para este método, tenemos que usar una clase con un fondo personalizado situado en un atributo de estilo en lugar de una etiqueta de imagen con un src. Usted puede ajustar la posición de fondo y anular el tamaño del fondo a tu gusto.

    <div class="my_wrapper_class">
      <div class="background_blurred" style="background: url('URL OF IMAGE TO BLUR') no-repeat; background-position: 50% 0;"></div>
      <div class="foreground">
        <p>Stuff that should appear above the blurred background and not be blurred.</p>
      </div>
    </div>
  5. 0

    Con CSS3 podemos ajustar fácilmente una imagen. Pero recuerde, esto no cambia la imagen. Sólo se muestra la imagen ajustada.

    Ver demostración en vivo y el código fuente completo aquí

    http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

    Ver el código siguiente para obtener más detalles.

    Para hacer una imagen gris:

    img {
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
    }

    Para dar una sepia:

        img {
         -webkit-filter: sepia(100%);
        -moz-filter: sepia(100%);
    }

    Para ajustar el brillo:

     img {
         -webkit-filter: brightness(50%);
         -moz-filter: brightness(50%);  
      }

    Para ajustar el contraste:

     img {
         -webkit-filter: contrast(200%);
         -moz-filter: contrast(200%);    
    }

    Para Desenfocar una imagen:

        img {
         -webkit-filter: blur(10px);
        -moz-filter: blur(10px);
      }

Dejar respuesta

Please enter your comment!
Please enter your name here