Maison > Article > interface Web > À propos de l'utilisation de l'attribut background-attachment de CSS

À propos de l'utilisation de l'attribut background-attachment de CSS

不言original: 2018-06-21 17:48:392160parcourir

Cet article vous présente principalement comment utiliser l'attribut background attachment background-attachment en CSS pour définir si l'image d'arrière-plan défile avec l'objet ou reste fixe. Les amis qui en ont besoin peuvent s'y référer

<.> 1. Attribut Background-attachment

En CSS, vous pouvez utiliser l'attribut background-attachment background-attachment pour définir si l'image d'arrière-plan défile avec l'objet ou reste fixe.

Syntaxe :

background-attachment:scroll/fixed;

Explication :

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 :

Lorsque vous faites glisser la barre de défilement à droite dans le navigateur, vous constaterez que l'image de fond est fixée sur la page.

Après avoir défini background-attachment dans IE ou 360, vous ne pouvez pas définir l'attribut background-position, sinon l'image ne sera pas affichée dans le navigateur. Vous pouvez tester le navigateur Google et le navigateur Firefox.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Simuler l'effet de box-shadow en CSS3 sous IE

À propos de l'utilisation d'une image d'arrière-plan dans css Idées d'implémentation pour créer un menu de navigation

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!

php firefox css css3 对象 position background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse de la grille CSS3Article suivant：Analyse de la grille CSS3

Articles Liés

Voir plus