Maison > interface Web > tutoriel CSS > Explication détaillée de l'utilisation de CSS background-attachment

Explication détaillée de l'utilisation de CSS background-attachment

php中世界最好的语言
Libérer: 2018-03-22 10:08:42
original
3128 Les gens l'ont consulté

Cette fois je vous apporte quelles sont les précautionsVoici un cas pratique, jetons un oeil.

1. background-attachmentattribut

En CSS, utilisez l'attribut background attachment background-attachment pour définir l'image d'arrière-planQu'il défile avec l'objet ou qu'il reste fixe.
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>
Copier après la connexion

L'effet d'aperçu dans le navigateur est le suivant :

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

CSS propose plusieurs façons d'implémenter une disposition à trois colonnes

Spécifications de développement CSS et Sass

CSS pour faire pivoter l'icône lorsque la souris monte

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal