Maison >interface Web >tutoriel CSS >Introduction de base à la propriété CSS background-attachment
Introduction de base à la propriété CSS background-attachment
- 小云云original
- 2017-12-19 13:17:453093parcourir
Cet article vous présente principalement comment utiliser l'attribut background-attachment en CSS pour définir si l'image d'arrière-plan défile avec l'objet ou est corrigée. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra vous aider.
1. Attribut Background-attachment
En CSS, utilisez l'attribut background attachment background-attachment pour définir si l'image d'arrière-plan défile avec l'objet ou est corrigée.
Syntaxe :
background-attachment:scroll/fixed;
Description :
L'attribut background-attachment n'a que 2 valeurs d'attribut. scroll signifie que l'image d'arrière-plan défile au fur et à mesure que l'objet défile, ce qui est l'option par défaut ; fixe signifie que l'image d'arrière-plan est fixe sur la page et que seul le reste du contenu défile avec la barre de défilement.
Par exemple :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#p1
{
width:160px;
height:1200px;
border:1px solid gray;
background-image:url("cartoongirl.gif");
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p id="p1"></p>
</body>
</html>
L'effet d'aperçu dans le navigateur est le suivant :
Analyse :
Tout le monde navigue Faites glisser la barre de défilement à droite dans le navigateur et vous constaterez que l'image de fond est fixe sur la page.
Après avoir défini background-attachment dans IE ou 360, l'attribut background-position ne peut pas être défini, sinon l'image ne sera pas affichée dans le navigateur. Vous pouvez tester le navigateur Google et le navigateur Firefox.
Recommandations associées :
Utilisation et définition de l'attribut CSS background-attachment
Analyse du nombre de statistiques de tableau de code source PHP de pièce jointe en arrière-plan
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!