Maison interface Web tutoriel CSS Utilisation avancée de la pièce jointe en arrière-plan en CSS

Utilisation avancée de la pièce jointe en arrière-plan en CSS

Mar 22, 2018 am 10:11 AM
使用方法

Cette fois, je vais vous présenter la méthode d'utilisation avancée de background-attachment de css, et quelles sont les précautions lors de l'utilisation de background-attachment de css. Ce qui suit est un cas pratique. jetez un oeil une fois.

Le principe est de définir l'attribut

background-image, puis d'utiliser background-attachment pour indiquer si la position de l'image d'arrière-plan est fixée à la fenêtre ou se déplace avec le bloc conteneur. Cela peut être simplement compris comme définissant la manière dont l’image d’arrière-plan se déplace le long de l’axe de défilement. Valeur :
scroll : valeur par défaut, l'image d'arrière-plan est fixe par rapport à l'élément et l'arrière-plan se déplace à mesure que la page défile, c'est-à-dire que l'arrière-plan et le contenu sont liés.
fixe : l'image d'arrière-plan est fixe par rapport à la fenêtre d'affichage, de sorte que l'arrière-plan ne bouge pas lorsque la page défile, ce qui équivaut à définir l'arrière-plan sur le corps.
local : L'image de fond est fixe par rapport au contenu de l'élément,
inhert : héritage, rien à dire.
Cet attribut peut être appliqué à n’importe quel élément.

1. scroll [Défilement de l'image d'arrière-plan] Set background-attachment:scroll L'image d'arrière-plan est fixe par rapport à l'élément lui-même. Lorsque le contenu se déplace, l'image d'arrière-plan se déplace également. La bordure attachée à l'élément.

local

Remarque :
Pour le défilement, l'arrière-plan défile généralement avec le contenu, mais il y a une exception.
Pour les éléments déroulants (éléments définis pour déborder : scroll). Lorsque background-attachment est configuré pour défiler, l'image d'arrière-plan ne défilera pas lorsque le contenu de l'élément défile.

2. local [Défilement de l'image d'arrière-plan de l'élément défilant] Pour les éléments défilants (éléments définis sur overflow:scroll), définissez background-attachment :local, l'arrière-plan défilera au fur et à mesure que le contenu défile.
Étant donné que l'image d'arrière-plan est positionnée par rapport au contenu de l'élément lui-même et est initialement fixe, l'image d'arrière-plan défile avec le contenu après l'apparition de la barre de défilement sur l'élément.

<style>
p{
    width: 200px;
    height: 350px;
    border: 1px solid red;
    background-image: url(img/img_tree.png);
    background-repeat: no-repeat;
    background-attachment: local;
    overflow: scroll;
    line-height: 1.5;
}
</style>
<body>
    <p>
    1内容超出会出现滚动条
    2内容超出会出现滚动条
    3内容超出会出现滚动条
    4内容超出会出现滚动条
    5内容超出会出现滚动条
    6内容超出会出现滚动条
    7内容超出会出现滚动条
    8内容超出会出现滚动条
    9内容超出会出现滚动条
    10内容超出会出现滚动条
    11内容超出会出现滚动条
    12内容超出会出现滚动条
    13内容超出会出现滚动条
    14内容超出会出现滚动条
    15内容超出会出现滚动条
    16内容超出会出现滚动条
    17内容超出会出现滚动条
    18内容超出会出现滚动条
    19内容超出会出现滚动条
    20内容超出会出现滚动条
    </p>
</body>
Copier après la connexion

3. Corrigé : [L'image d'arrière-plan est toujours] L'image d'arrière-plan est fixe par rapport à la fenêtre d'affichage même si l'élément a un. barre de défilement, l'image d'arrière-plan ne bouge pas non plus avec le contenu. L'utilisation de fix est la suivante :

<style>
body{
    background-image: url(img/cartooncat.png);
    background-position: bottom left;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 1000px;
}
</style>
</head>
<body>
    <h1>下拉看效果:</h1>
</body>
Copier après la connexion

Ou voir la démo de Mozilla.

Je tiens à souligner mon opinion ici :

Set background-attachment : fixé à l'image d'arrière-plan de n'importe quel élément ; l'effet est le même, les deux sont relatifs à la fenêtre, car un site Web page Il n'y a qu'une seule fenêtre et l'arrière-plan n'a rien à voir avec l'élément. La seule chose qui compte est que si l'élément n'est pas visible, l'image d'arrière-plan n'est pas visible.

Et quelle est cette fenêtre d'affichage ? Voici un article recommandé "Détails des pixels et des fenêtres du navigateur"

4. Attachement d'arrière-plan de plusieurs images d'arrière-plan Vous pouvez également définir l'attachement d'arrière-plan pour plusieurs images d'arrière-plan

body {
  background-image: url("img1.png"), url("img2.png");
  background-attachment: scroll, fixed;
}
Copier après la connexion

5. Liens vers les ressources

w3c background-attachment

Détails des pixels et des fenêtres du navigateur

un tableau de deux fenêtres

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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

Liste de prix d'implémentation de Bootstrap

Explication détaillée de l'utilisation de px, em et rem en css

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!

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

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser l'outil de réparation DirectX ? Utilisation détaillée de l'outil de réparation DirectX Comment utiliser l'outil de réparation DirectX ? Utilisation détaillée de l'outil de réparation DirectX Mar 15, 2024 am 08:31 AM

Comment utiliser l'outil de réparation DirectX ? Utilisation détaillée de l'outil de réparation DirectX

Introduction au code d'état HTTP 525 : explorez sa définition et son application Introduction au code d'état HTTP 525 : explorez sa définition et son application Feb 18, 2024 pm 10:12 PM

Introduction au code d'état HTTP 525 : explorez sa définition et son application

Comment utiliser Baidu Netdisk-Comment utiliser Baidu Netdisk Comment utiliser Baidu Netdisk-Comment utiliser Baidu Netdisk Mar 04, 2024 pm 09:28 PM

Comment utiliser Baidu Netdisk-Comment utiliser Baidu Netdisk

Apprenez à copier et coller rapidement Apprenez à copier et coller rapidement Feb 18, 2024 pm 03:25 PM

Apprenez à copier et coller rapidement

Qu'est-ce que l'outil d'activation KMS ? Comment utiliser l'outil d'activation KMS ? Comment utiliser l'outil d'activation KMS ? Qu'est-ce que l'outil d'activation KMS ? Comment utiliser l'outil d'activation KMS ? Comment utiliser l'outil d'activation KMS ? Mar 18, 2024 am 11:07 AM

Qu'est-ce que l'outil d'activation KMS ? Comment utiliser l'outil d'activation KMS ? Comment utiliser l'outil d'activation KMS ?

Qu'est-ce que PyCharm ? Introduction aux fonctions et explication détaillée de l'utilisation Qu'est-ce que PyCharm ? Introduction aux fonctions et explication détaillée de l'utilisation Feb 20, 2024 am 09:21 AM

Qu'est-ce que PyCharm ? Introduction aux fonctions et explication détaillée de l'utilisation

Comment utiliser l'outil d'activation Xiaomi win7 - Comment utiliser l'outil d'activation Xiaomi win7 Comment utiliser l'outil d'activation Xiaomi win7 - Comment utiliser l'outil d'activation Xiaomi win7 Mar 04, 2024 pm 06:16 PM

Comment utiliser l'outil d'activation Xiaomi win7 - Comment utiliser l'outil d'activation Xiaomi win7

Comment utiliser correctement l'invite de commande Win10 pour effectuer des opérations de réparation automatique Comment utiliser correctement l'invite de commande Win10 pour effectuer des opérations de réparation automatique Dec 30, 2023 pm 03:17 PM

Comment utiliser correctement l'invite de commande Win10 pour effectuer des opérations de réparation automatique

See all articles