HTML, CSS et jQuery : conseils pour rendre les images floues

HTML, CSS et jQuery : Conseils pour obtenir des effets de flou d'image

Introduction :
Les effets de flou d'image sont souvent utilisés dans la conception Web pour augmenter l'artistique et l'attractivité de la page. Cet article expliquera comment utiliser HTML, CSS et jQuery pour obtenir des effets de flou d'image et fournira des exemples de code spécifiques.

1. Utilisez l'attribut filter de CSS

L'attribut filter de CSS peut utiliser une série d'effets de filtre pour modifier les performances visuelles des éléments, y compris les effets de flou. Nous pouvons obtenir l'effet de flou de l'image en définissant la valeur de flou de l'attribut de filtre.

Exemple de code :

<style>
.blur-img {
  filter: blur(5px);
}
</style>

<img  class="blur-img lazy"  src="/static/imghw/default1.png"  data-src="example.jpg"  alt="HTML, CSS et jQuery : conseils pour rendre les images floues" >

Dans l'exemple ci-dessus, nous avons défini un style CSS avec un nom de classe de .blur-img et défini la valeur de flou de l'attribut de filtre sur 5px. Appliquez ensuite cette classe à l'image qui nécessite un effet de flou, et l'image affichera un effet de flou.

Il convient de noter que la compatibilité de l'attribut de filtre CSS peut être différente selon les navigateurs, vous devez donc faire attention aux problèmes de compatibilité des navigateurs lors de l'utilisation de l'attribut de filtre.

2. Utilisez les plug-ins jQuery

jQuery est une puissante bibliothèque JavaScript dotée d'une multitude de plug-ins qui peuvent nous aider à obtenir divers effets. Pour obtenir un effet de flou d'image, nous pouvons utiliser d'excellents plug-ins jQuery.

1. Plug-in jQuery Blur.js

Blur.js est un plug-in de flou d'image basé sur jQuery. Son principe est d'utiliser l'effet de filtre de flou CSS pour flouter l'image. Ce plug-in est très simple à utiliser, il suffit d'introduire le fichier du plug-in et d'appeler la méthode correspondante.

Exemple de code :

<script src="jquery.js"></script>
<script src="jquery.blur.js"></script>
<script>
$(document).ready(function(){
  $('.blur-img').blurjs({
    source: 'example.jpg',
    radius: 5
  });
});
</script>

<div class="blur-img"></div>

Dans l'exemple ci-dessus, nous avons d'abord présenté les fichiers des plugins jQuery et Blur.js. Ensuite, une fois la page chargée, appelez la méthode blurjs et définissez le paramètre source sur le chemin de l'image à flouter et le rayon sur le degré de flou. Enfin, nous créons un élément div avec le nom de classe .blur-img, et le plugin appliquera automatiquement l'effet de flou d'image à cet élément.

2. Plug-in jQuery Backstretch

Backstretch est un plug-in jQuery léger et facile à utiliser qui peut utiliser n'importe quelle image comme arrière-plan de la page et prend en charge les effets adaptatifs et de flou de l'image.

Exemple de code :

<script src="jquery.js"></script>
<script src="jquery.backstretch.js"></script>
<script>
$(document).ready(function(){
  $.backstretch("example.jpg");
});
</script>

Dans l'exemple ci-dessus, nous avons introduit les fichiers des plugins jQuery et Backstretch. Ensuite, une fois la page chargée, appelez la méthode backstretch et définissez les paramètres sur le chemin de l'image qui doit être utilisée comme arrière-plan. Le plugin définit automatiquement l'image comme arrière-plan de la page et ajoute éventuellement un effet de flou.

Il convient de noter que lors de l'utilisation de plug-ins, assurez-vous que la version correcte du fichier du plug-in est introduite et suivez l'utilisation du plug-in.

Résumé :
En utilisant HTML, CSS et jQuery, nous pouvons facilement obtenir un effet de flou d'image. En utilisant l'attribut filter de CSS ou l'excellent plug-in jQuery, nous pouvons choisir la méthode la plus adaptée en fonction de nos besoins pour obtenir l'effet de flou d'image. J'espère que les conseils et exemples de code fournis dans cet article seront utiles aux lecteurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!