L'utilisation et la définition de l'attribut CSS background-attachment

background-attachment -- Définit la façon dont l'image d'arrière-plan se déplace avec l'axe de défilement

Valeurs : scroll | l'image d'arrière-plan de l'axe se déplacera

fixe : l'image d'arrière-plan de l'axe ne bougera pas lorsque la page défile

hériter : hérité

Valeur initiale : défilement

Héritage : Non

S'applique à : Tous les éléments

background : background.attachment : attachment.

Exemple

L'arrière-plan du screen L'image est une ligne orange. À mesure que l'axe de défilement se déplace, la position visuelle de la ligne orange reste inchangée.

body 
{	
background-image:url('list-orange.png');	
background-attachment:fixed;	
background-repeat:repeat-x;	
background-position:center center;
}

Exemple de propriété CSS background-attachment - Vous pouvez essayer de modifier

Arrière-plan CSS -exemple de propriété de pièce jointe

Le défilement parallaxe fait référence au déplacement d'arrière-plans multicouches à différentes vitesses pour former un effet de mouvement tridimensionnel et apporter une excellente expérience visuelle. En tant que tendance en vogue dans la conception de sites Web cette année, de plus en plus de sites Web ont appliqué cette technologie.

Si vous ne comprenez pas, vous pouvez d'abord jeter un œil à l'effet sur eBay : http://www.ebay.com/new/

En fait, c'est pour réparer l'arrière-plan et l'empêchent de se déplacer avec l'axe de défilement, mais le conteneur contenant l'arrière-plan défile, provoquant une différence visuelle qui semble être la même que lors du changement de scène. (Ne laissez pas cette explication être trop déroutante...)

L'attribut qui définit la méthode de défilement d'arrière-plan en CSS est background-attachment

background-attachment - définit la façon dont l'image d'arrière-plan se déplace avec l'axe de défilement

Valeurs : défilement | fixe | héritage

défilement : valeur par défaut.

L'image d'arrière-plan

se déplace à mesure que le reste de la page défile. corrigé : L'image d'arrière-plan ne bouge pas lorsque le reste de la page défile.

inherit : Spécifie que le paramètre de l'attribut background-attachment doit être hérité de l'élément parent.

Valeur initiale : scroll

Héritage : Non

S'applique à : tous les éléments

Prise en charge du navigateur :

Testé cela chrome, opera, safari, firefox, ie7-8 sont tous ok, donc cela signifie que cela ne fonctionnera pas sous IE6~

Pour utiliser cet attribut sous IE6, vous devez placer background-attachment:fixed dans le body Ou en html, c'est à dire qu'il est inutile dans d'autres balises. L'effet que vous pouvez voir dans le w3c ci-dessus est dû au fait qu'il est placé dans le corps.

C'est une démo que j'ai réalisée moi-même, cliquez pour télécharger

Code :

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!