Arrière-plan CSS et sprites

Cette fois, je vous présente des arrière-plans et des sprites CSS. Quelles sont les précautions lors de l'utilisation d'arrière-plans et de sprites CSS. Voici des cas pratiques, jetons un coup d'œil.

1. Comment définir la couleur de fond de l'étiquette ?

Il existe un attribut background-color: en CSS, qui est spécialement utilisé Pour définir la

valeur de la couleur de fond de l'étiquette :

Mot spécifique rgb rgba hexadécimal

touche de raccourci :

bc background-color : #fff;

2. Comment définir l'image d'arrière-plan ?

En CSS, il y a un attribut appelé background-image : url( ); , qui est la touche de raccourci

spécialement utilisée pour définir l'image d'arrière-plan :

bi background-image: url();

Remarques :

1. L'adresse de l'image doit être placée dans url(). L'adresse de l'image peut être une adresse locale ou une adresse réseau -
adresse

2. pas aussi grand que la taille de l'étiquette, alors il sera automatiquement carrelé horizontalement et verticalement pour remplir

3 S'il y a une image sur la page Web, le navigateur enverra à nouveau une demande pour obtenir les données de. l'image

3. Attribut de mosaïque d'arrière-plan

Il existe un attribut background-repeat en CSS, qui est spécifiquement utilisé pour contrôler la méthode de mosaïque. des images d'arrière-plan.

valeur :

répéter Par défaut, nécessite un carrelage à la fois horizontalement et verticalement
aucune répétition ne nécessite de carrelage à la fois horizontalement et verticalement
répéter-x uniquement des carrelages horizontalement.
répéter uniquement verticalement Tile

touche de raccourci

bgr background-repeat :

Scénario d'application :

Vous pouvez réduire la taille du image en mosaïque l'image d'arrière-plan, améliorez la vitesse d'accès à la page Web

4. Attribut de positionnement d'arrière-plan

Comment contrôler la position de l'image d'arrière-plan ?

En CSS, il existe une propriété appelée background-position: attribut, qui est spécialement utilisé pour contrôler la position de l'image d'arrière-plan

Format :

. background-position : direction horizontale direction verticale ;

3. Valeur

3.1 Noms d'orientation spécifiques
Direction horizontale : gauche centre droite
Direction verticale : haut centre bas

3.2 Pixels spécifiques
Par exemple : background- position : 100px 200px;
N'oubliez pas d'écrire l'unité, c'est-à-dire que vous devez écrire px
N'oubliez pas que des pixels spécifiques peuvent recevoir des nombres négatifs

Touches de raccourci :

bp background-position : 0 0 ;

Remarque :

La même balise peut définir la couleur d'arrière-plan et l'image d'arrière-plan en même temps. la couleur et l'image existent en même temps, l'image écrasera la couleur

5. Abréviation de l'attribut d'arrière-plan

1 Format de l'abréviation de l'attribut d'arrière-plan

arrière-plan : couleur d'arrière-plan. méthode de mosaïque d'image d'arrière-plan méthode d'association méthode de positionnement ;

touche de raccourci :

bg+ background : #fff url() 0 0 no-repeat ;

Remarque :

Dans l'attribut d'arrière-plan, n'importe quel attribut peut être omis

3 Quelle est la méthode de corrélation d'arrière-plan ?

Par défaut, l'image d'arrière-plan défilera à mesure que la barre de défilement défile. Si vous ne souhaitez pas que l'image d'arrière-plan défile lorsque la barre de défilement défile, nous pouvons modifier la relation entre l'image d'arrière-plan et le défilement. bar

4. Comment modifier la méthode d'association du fond ?

Il existe un attribut appelé background-attachment en CSS. Cet attribut est spécifiquement utilisé pour modifier la méthode d'association. background-attachment: scroll;

Valeur :

scroll Valeur par défaut, défilera lorsque la barre de défilement défile

fixe ne défilera pas lorsque la barre de défilement défile

Raccourci clés :

babackground-attachment :;

5. La différence entre les images d'arrière-plan et les images insérées ?

1. insérer des images ?1.1

L'image d'arrière-plan n'est qu'une décoration et n'occupera pas la position (vous pouvez y écrire d'autres balises et contenus)

L'insertion de l'image occupera la position (non autorisé) Écrivez d'autres balises et contenus dessus)

1.2

L'image d'arrière-plan a des attributs de positionnement, vous pouvez donc facilement contrôler la position de l'image

L'image insérée ne le fait pas avoir des attributs de positionnement et tous les contrôles pour l'image L'emplacement n'est pas très pratique

1.3

La sémantique de l'insertion d'images est plus forte que la sémantique des images d'arrière-plan, donc dans le développement d'entreprise, si votre les images veulent être incluses par les moteurs de recherche, il est recommandé d'utiliser des images insérées

6. Sprites CSS

1 Que sont les sprites CSS Les sprites CSS sont une technologie de synthèse d'images

2. Le rôle des sprites CSS

peut réduire le nombre de requêtes et réduire la pression de traitement du serveur

3 Comment utiliser les sprites CSS.

Les sprites CSS doivent correspondre à l'image d'arrière-plan et au positionnement de l'arrière-plan pour être utilisés

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 payer. attention aux autres articles connexes sur le site php chinois !

Lecture recommandée :

.box1{
            width: 110px; //设置宽高
            height: 143px;
            background-position: -560px -216px; //设置xy
        }

Comment charger HTMLString dans iOS webView

Conseils HTML5 qui sont facilement négligés

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!