interface Web
tutoriel CSS
Pourquoi mon dégradé CSS3 ne s'étire-t-il pas pour remplir toute la fenêtre du navigateur ?
Pourquoi mon dégradé CSS3 ne s'étire-t-il pas pour remplir toute la fenêtre du navigateur ?
Dec 10, 2024 am 10:09 AM
Élongation des dégradés en CSS3
Lors de la spécification d'un arrière-plan dégradé CSS3 pour l'élément <body> élément, le dégradé ne s’étire pas pour remplir toute la fenêtre du navigateur. Au lieu de cela, il se répète jusqu'à ce que la zone de contenu soit remplie. Ce comportement peut être frustrant si vous souhaitez que le dégradé s'étende au-delà du contenu.
Solution
Pour étirer le dégradé pour remplir la fenêtre du navigateur, appliquez le CSS suivant :
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}Ces styles accomplissent les tâches suivantes :
- html { hauteur : 100 % ; } : définit la hauteur du champ <html> élément à 100 %, garantissant que l'arrière-plan dégradé peut s'étendre au-delà de la zone visible.
- body { height: 100%; marge : 0 ; } : définit la hauteur du champ <body> élément à 100 % et supprime toutes les marges pour éliminer tout chevauchement potentiel entre le dégradé et le contenu.
- background-repeat : no-repeat ; : empêche le dégradé de se répéter après avoir rempli la zone de contenu.
- background-attachment:fixed; : garantit que le dégradé reste fixe lorsque la barre de défilement se déplace, créant un effet de dégradé continu tout au long de la page. fenêtre.
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!
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Ajout d'ombres de boîte aux blocs et éléments WordPress
Mar 09, 2025 pm 12:53 PM
Ajout d'ombres de boîte aux blocs et éléments WordPress
Créez un formulaire de contact JavaScript avec le cadre Smart Forms
Mar 07, 2025 am 11:33 AM
Créez un formulaire de contact JavaScript avec le cadre Smart Forms
Créer un éditeur de texte en ligne avec l'attribut satisfaistable
Mar 02, 2025 am 09:03 AM
Créer un éditeur de texte en ligne avec l'attribut satisfaistable
Faire votre première transition Svelte personnalisée
Mar 15, 2025 am 11:08 AM
Faire votre première transition Svelte personnalisée
Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)
Mar 04, 2025 am 10:22 AM
Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)
Téléchargement de fichiers avec Multer dans Node.js et Express
Mar 02, 2025 am 09:15 AM
Téléchargement de fichiers avec Multer dans Node.js et Express
Meilleures animations et effets CSS sur Codecanyon 2025 (payé gratuitement)
Mar 01, 2025 am 09:32 AM
Meilleures animations et effets CSS sur Codecanyon 2025 (payé gratuitement)
