web-dev-qa-db-fra.com

Blur Img's & Div's en HTML en utilisant CSS

Est-il possible d'appliquer un flou à un élément HTML (div & img)?

Je développe uniquement pour l'iPad, la compatibilité entre les navigateurs n'est donc pas un problème et je peux utiliser les techniques HTML5 CSS3.

Je sais comment brouiller le texte mais ce CSS ne brouille pas l'élément HTML réel ou sa bordure:

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

J'ai googlé cela, mais cela ne rend pas l'image floue dans mes navigateurs:

filter: blur(strength=50);
javascripthtmlcsscss3
35
sazr

J'ai vu aujourd'hui un didacticiel intéressant sur le flou du contenu avec CSS box-shadows, text-shadows, opacité et couleur.

Voici la démo: http://tympanus.net/Tutorials/ItemBlur/

Et le tutoriel: http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

28
Jasper

Webkit possède une propriété appelée -webkit-filter Qui permet les techniques de flou: -webkit-filter: blur(15px);

http://jsfiddle.net/danielfilho/KxWRA/

22
bafromca

Vous pouvez simplement ajouter ceci à votre CSS, pour une image:

Dans l'exemple suivant, vous allez utiliser un flou avec 5 pixels de rayon. Et il est extrêmement important d'utiliser tous les préfixes de fournisseurs disponibles, donc cela fonctionne sur tous les navigateurs avec cette fonctionnalité implémentée, jusqu'à ce qu'il s'agisse d'une version "stable".

img{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}
15
Daniel Filho

Je pense que le meilleur moyen est de superposer plusieurs fois la même image sur lui-même et de tester différents positionnements et opacités sur ceux superposés.

Voici le CSS que j'ai trouvé. Gardez à l'esprit que j'utilise le nth-child Sélecteur CSS3 (mais vous ne semblez pas avoir de problème avec ça):

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>

Le résultat est assez prometteur.

4
Purag

CSS n'a pas la possibilité de flou, en plus des techniques avec text-shadow et box-shadow. Mais même avec ceux-ci, les bordures et les images ne peuvent pas être floues.

Cette bibliothèque JavaScript , cependant, peut gérer les images.

En outre, vous pouvez trouver cela technique intéressant. C'est une illusion nette utilisant des images floues préfabriquées.

2
bookcasey

Il y a peu de temps, j'ai dû faire des recherches approfondies sur ce problème et j'ai trouvé une solution extrêmement flexible, même si elle peut être excessive pour les besoins de certaines personnes. J'avais besoin non seulement d'images floues, mais aussi d'un rayon de flou dynamique, d'une couleur de superposition et d'une opacité de superposition pour différents types d'images. J'avais également besoin d'avoir la possibilité de flouter une image en arrière-plan avec d'autres éléments superposés dessus. Voici la meilleure solution multi-navigateur (et performante) que j'ai pu créer.

Tout d'abord, j'aurais un SVG sous la main, sans appel appelé blur.svg. Il applique un filtre de flou et si vous regardez de plus près, le stdDeviation (qui définit le rayon de flou) est en fait défini par programme à partir d'un paramètre transmis à l'URL demandant l'actif.

<?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>

Ensuite, j'ai eu un mixage SCSS qui permettrait d'ajouter une superposition de flou à n'importe quel emballage, avec un rayon de flou personnalisable, une couleur de superposition et une opacité de superposition.

@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;
  }
}

Vous vous demandez peut-être pourquoi j'ai inclus une transform: translateZ(0);. Le seul effet qui en résulte est de forcer l'accélération matérielle sur le rendu pour que les choses restent performantes. Vous vous demandez peut-être également pourquoi il n'y a pas de préfixe de fournisseur. Vous pouvez rechercher des choses comme filter on CanIUse si vous voulez, mais j'ai utilisé autoprefixer sur ce projet pour me soucier de ce genre de choses pour moi. Et bien sûr, pourquoi filtrer en utilisant ce SVG, plutôt qu'avec quelque chose comme blur(4px)? Cela ne serait-il pas plus facile? Ce serait le cas, mais Firefox (au moment de l'écriture) ne supporte que la propriété filter avec une URL.

Ensuite, vous pouvez appliquer le mixage de flou à une classe wrapper:

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

Notez que pour cette méthode, nous devons utiliser une classe avec un arrière-plan personnalisé défini dans un attribut de style au lieu d'une balise d'image avec un src. Vous pouvez modifier la position de l'arrière-plan et remplacer la taille de l'arrière-plan à votre convenance.

<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>
1
Chris Fritz

Avec CSS3, nous pouvons facilement ajuster une image. Mais rappelez-vous que cela ne change pas l'image. Il affiche uniquement l'image ajustée.

Voir la démo en direct et le code source complet ici

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

Voir le code suivant pour plus de détails.

Pour rendre une image grise:

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

Pour donner un look sépia:

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

Pour régler la luminosité:

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

Pour régler le contraste:

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

Pour flouter une image:

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