css3 efecto brillo - Cómo aplicar un filtro de desenfoque de CSS 3 a una imagen de fondo





6 Answers

pen

Eliminar la necesidad de un elemento adicional, junto con hacer que el contenido se ajuste al flujo del documento en lugar de ser fijo / absoluto como otras soluciones.

Logrado utilizando

.content {
  overflow: auto;
  position: relative;
}

Se necesita un desbordamiento automático, de lo contrario el fondo se compensará con unos pocos píxeles en la parte superior.

Después de esto simplemente necesitas

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

EDITAR Si está interesado en eliminar los bordes blancos en los bordes, use un ancho y alto de 110% y una izquierda y la parte superior de -5% . Esto aumentará un poco sus fondos, pero no debería haber sangrado de color sólido desde los bordes.

Pen actualizada aquí: https://codepen.io/anon/pen/QgyewB - Gracias Chad Fawcett por la sugerencia.

blur cambiar color

Tengo un archivo JPEG que estoy usando como imagen de fondo para una página de búsqueda, y estoy usando CSS para configurarlo porque estoy trabajando en contextos Backbone.js :

background-image: url("whatever.jpg");

Quiero aplicar un filtro de desenfoque de CSS 3 solo al fondo, pero no estoy seguro de cómo estilizar solo ese elemento. Si lo intento

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

justo debajo background-image en mi CSS, da estilo a toda la página, en lugar de solo al fondo. ¿Hay una manera de seleccionar solo la imagen y aplicar el filtro a eso? Alternativamente, ¿hay una manera de simplemente desactivar el desenfoque para todos los demás elementos de la página?




Necesita reestructurar su HTML para hacer esto. Tienes que desenfocar todo el elemento para desenfocar el fondo. Entonces, si quieres desenfocar solo el fondo, tiene que ser su propio elemento.




Solución simple para navegadores modernos en CSS puro con un pseudo-elemento 'antes' como la solución de Matthew Wilcoxson. Para evitar la necesidad de acceder al pseudo-elemento para cambiar la imagen y otros atributos en el script java, simplemente use heredar como valor y acceda a ellos a través del elemento principal (aquí cuerpo).

body::before{
  content: ""; /* important */
  z-index: -1; /* important */
  position: inherit;  
  left: inherit;
  top: inherit;
  width: inherit;                                                                               
  height: inherit;  
  background-image: inherit;
  background-size: cover; 
  filter: blur(8px);
}
body{
  background-image: url("xyz.jpg"); 
  background-size: 0 0;  /* image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* or absolute for scrollable backgrounds */  
}   



Aunque todas las soluciones mencionadas son muy inteligentes, todas parecían tener problemas menores o posibles efectos de detonación con otros elementos en la página cuando los probé.

Al final, para ahorrar tiempo, simplemente volví a mi solución anterior: utilicé Paint.NET y fui a Effects, Gaussian Blur con un radio de 5 a 10 píxeles y lo guardé como la imagen de la página. :-)

HTML:

<body class="mainbody">
</body

CSS:

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

EDITAR:

Finalmente lo puse en funcionamiento, ¡pero la solución no es en absoluto sencilla! Mira aquí:




div{
 background: inherit;
 width: 250px;
 height: 350px;
 position: absolute;
 overflow: hidden;  //adding overflow hidden
}
div:before{
 content: ‘’;
 width: 300px;
 height: 400px;
 background: inherit; 
 position: absolute;
 left: -25px;  //giving minus -25px left position
 right: 0;
 top: -25px;   //giving minus -25px top position 
 bottom: 0;
 box-shadow: inset 0 0 0 200px rgba(255,255,255,0.3);
 filter: blur(10px);
}




todo lo que realmente necesita es "filter: blur (≪WhatEverYouWantInPx≫);"

body {
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
}

#background {
  background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  
  /* START */
  /* START */
  /* START */
  /* START */
  
  /* You can adjust the blur-radius as you'd like */
  filter: blur(3px);
  
}
<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>




Related