imagenes - Cómo aplicar un filtro de desenfoque de CSS 3 a una imagen de fondo
efectos css (13)
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í:
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?
Como se indica en otras respuestas, esto se puede lograr con:
- Una copia de la imagen borrosa como fondo.
- Un pseudo elemento que puede filtrarse y colocarse detrás del contenido.
También puede utilizar backdrop-filter
Existe una propiedad compatible llamada backdrop-filter , actualmente se admite en Edge , Safari y iOS Safari (consulte caniuse.com para obtener estadísticas).
De backdrop-filter :
La propiedad de filtro de fondo proporciona efectos como desenfoque o cambio de color del área detrás de un elemento, que luego puede verse a través de ese elemento ajustando la transparencia / opacidad del elemento.
Lo usarías así:
.box {
-webkit-backdrop-filter: blur(5px); // Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+
backdrop-filter: blur(5px); // No one supports non prefixed yet
}
Para estadísticas ver caniuse.com
Echa un vistazo a esta pen .
Deberá usar dos contenedores diferentes, uno para la imagen de fondo y el otro para su contenido.
En el ejemplo, he creado dos contenedores, .background-image y .content .
Ambos se colocan con position: fixed e left: 0; right: 0; left: 0; right: 0; . La diferencia en mostrarlos proviene de los valores del z-index que se han establecido de manera diferente para los elementos.
HTML
<div class="background-image"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
<p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>
CSS
.background-image {
position: fixed;
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url(''http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG'');
width: 1200px;
height: 800px;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.content {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
margin-left: 20px;
margin-right: 20px;
}
Disculpas por el texto de Lorem Ipsum .
Actualizar
Gracias a Matthew Wilcoxson por una mejor implementación usando .content:before http://codepen.io/akademy/pen/FlkzB
En la pestaña .content en CSS, cámbielo a position:absolute . De lo contrario, la página renderizada no será desplazable.
Esta respuesta es para un diseño de tarjeta horizontal de Diseño de materiales con altura dinámica y una imagen.
Para evitar la distorsión de la imagen debido a la altura dinámica de la tarjeta, puede usar una imagen de marcador de posición de fondo con desenfoque para ajustar los cambios de altura.
Explicación
- La tarjeta está contenida en un
<div>con envoltorio de clase, que es un flexbox. - La tarjeta está formada por 2 elementos, una imagen que también es un enlace y contenido.
- El enlace
<a>, enlace de clase, se posiciona relativo . - El enlace consta de 2 subelementos, un marcador de posición
<div>borroso de clase y una imagen<img>clase que es la imagen clara. - Ambos se ubican en posición absoluta y tienen un
width: 100%, pero la imagen de la clase tiene un orden de pila más alto, es decir,z-index: 2, que lo coloca por encima del marcador de posición. - La imagen de fondo para el marcador de posición borroso se establece mediante el estilo en línea en el HTML.
Código
.wrapper {
display: flex;
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.16);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
background-color: #fff;
margin: 1rem auto;
height: auto;
}
.wrapper:hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.link {
display: block;
width: 200px;
height: auto;
overflow: hidden;
position: relative;
border-right: 2px solid #ddd;
}
.blur {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
.pic {
width: calc(100% - 20px);
max-width: 100%;
height: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.pic:hover {
transition: all 0.2s ease-out;
transform: scale(1.1);
text-decoration: none;
border: none;
}
.content {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
padding: 20px;
overflow-x: hidden;
}
.text {
margin: 0;
}
<div class="wrapper">
<a href="#" class="link">
<div class="blur" style="background: url(''http://www.planwallpaper.com/static/assets/img/header.jpg'') 50% 50% / cover;"></div>
<img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
</a>
<div class="content">
<p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
</div>
</div>
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.
Por favor revise el siguiente código: -
.backgroundImageCVR{
position:relative;
padding:15px;
}
.background-image{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background:url(''http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg'');
background-size:cover;
z-index:1;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
.content{
position:relative;
z-index:2;
color:#fff;
}
<div class="backgroundImageCVR">
<div class="background-image"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
<p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>
</div>
Por supuesto, esto no es una solución CSS, pero puede usar CDN Proton con filtro:
body {
background: url(''https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1'');
}
Solo dejándolo saber, si esto ya no fue dicho. Si desea que el contenido sea desplazable, establezca la posición del contenido en absoluta:
content {
position: absolute;
...
}
No sé si esto fue solo para mí, pero si no, ¡esa es la solución!
Además, como el fondo es fijo, significa que tienes un efecto ''Parallax''. Así que no solo esta persona te enseñó cómo hacer un fondo borroso, sino también un efecto de fondo de paralaje.
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 */
}
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>
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.
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);
}