Salut. Aujourd'hui, nous considérons comment vous pouvez étirer le fond de CSS avec les moyens (sans interférence avec d'autres moyens, tels que JavaScript et d'autres comme eux comme eux).
Étirez les outils CSS d'arrière-plan est devenu possible avec l'apparition de CSS3, en utilisant spécifiquement la propriété de taille d'arrière-plan. Il faut dire que cette propriété fonctionne beaucoup mieux que des solutions similaires pour JavaScript (qui ont été utilisées avant l'apparition de la taille de fond), aussi plus rapide que de manière plus rapide et suffisamment répond à la modification de la taille du navigateur, plus rapidement lisse une image étirée et comment elles J'ai aimé parler au début de 2000 x, "fonctionnera même avec JavaScript désactivé."
Solution: Comment étirer les outils CSS de fond
Les propriétés de taille d'arrière-plan peuvent avoir plusieurs valeurs.
1) Ce peut être l'une des directives: couvrir ou contenir.
Taille de l'arrière-plan: contenir; / * Échange l'image tout en maintenant des proportions de manière à ce que la carte de l'ensemble ajustée dans le bloc. * / Taille de l'arrière-plan: Couverture; / * Échange l'image tout en préservant des proportions de manière à ce que sa largeur ou sa hauteur soit égale à la largeur ou à la hauteur de l'unité. * /
2) Ceux-ci peuvent être des pourcentages (100% ou 94% de la largeur du conteneur). Dans ce cas, vous pouvez utiliser à la fois 1 valeur en pourcentage et 2. Si les valeurs sont 2, l'altitude et la largeur de l'image seront éduquées et que chacune des valeurs est ajustée proportionnellement aux pourcentages spécifiés. dans les paramètres).
Taille de l'arrière-plan: 100%; / * Couverture de directive équivalente * / Taille de l'arrière-plan: 100% 50%; / * La largeur sera de 100% de la largeur du bloc, mais la hauteur n'est que de 50%, l'image sera probablement déformée * /
3) valeur numérique directement (en pischel, centimètres, em, etc.). Les paramètres peuvent également être 2 (ou 1), comme dans le cas précédent.
4) valeur automatique. Indique que l'image ne s'étire pas et la taille initiale sera utilisée. Dans le même temps, les paramètres peuvent également être 2 ou 1. c'est-à-dire que vous pouvez spécifier ce qui suit:
Taille de fond: 60% Auto; / * La largeur de l'image sera de 60% et la hauteur est proportionnelle aux tailles de la photo d'origine * /
Où la solution fonctionnera-t-elle pour étirer l'arrière-plan CSS?
Jugement par le site Puis-je utiliser le site, il fonctionnera dans tous les navigateurs modernes, y compris IE Version, n'est pas inférieur à 9. Il n'y a donc personne en principe. Voir la table de compatibilité: 
Bonne journée, bâtiments de sites de soins et amateurs de topums Web. Aujourd'hui, je veux répondre à la réponse à une question fréquemment posée non seulement des nouveaux arrivants, mais parfois des développeurs: "Comment étirer la photo CSS pour l'ensemble de l'écran?" En fait, une telle réception est très simplement mise en œuvre, mais la question est dans l'autre.
À ce jour, il existe de nombreuses façons et de programmation, grâce à laquelle l'image peut être placée sur un écran entier. Par conséquent, dans cette publication, je parlerai de plusieurs façons de créer une image d'arrière-plan complète à l'aide de CSS, CSS3, JQuery et PHP. Nous commençons à y aller!
Méthode 1. Image de fond adaptatif CSS
Afin de préparer l'image de fond adaptative, les tables de style en cascade fournissent une propriété contexte-taille. Il vous permet de définir la taille du fichier graphique par rapport à la taille de l'onglet Ouvrir.
Pour cela, il vous suffit d'écrire cette ligne:
contexte-taille: 100%aUTO.
Le premier paramètre, c'est-à-dire 100%, est responsable de l'étirement des images horizontalement, le deuxième paramètre est verticalement. Nous nous tournons maintenant vers l'exemple.
Cette méthode est prise en charge par les navigateurs, en commençant par la version 10, 3 versions de Safari, Firefox 3.6 et 9 de IE.
Méthode 2. Fond de caoutchouc avec CSS3
Avec la libération de la spécification CSS3, de nombreux outils pratiques ont été ajoutés au monde. Donc, pour créer un arrière-plan étiré comme une image, la même propriété est utilisée comme dans le chapitre précédent, cependant, la taille de l'image n'est pas donnée par des pourcentages, mais une couverture de mots spéciale: contexte-taille:couverture.. Très pratique, n'est-ce pas?
Pour voir comment cette propriété fonctionne, démarrez le dernier exemple en modifiant les paramètres de la taille de l'arrière-plan 100% et de l'automobile. couverture..
JQuery lui-même est très pratique. Il est plus facile de travailler avec l'API avec elle, il est plus facile d'accéder à divers éléments du code et il est également plus facile de mettre en œuvre certaines choses.
Pour l'exemple, cette méthode gagnée, vous devez d'abord connecter le script JS ici est une telle ligne:
Ci-dessous, j'ai joint le code de programme de l'exemple avec la mise en œuvre de JQuery déjà insérée.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
Planétarium en localité ouverte!Apprendre des étoiles distantes, des planètes et des cratères de la lune ... |
Planétarium en localité ouverte!
Apprendre des étoiles distantes, des planètes et des cratères de la lune ...
Cette méthode est universelle et supportée par de nombreux navigateurs, même lorsque les outils CSS ne fonctionnent pas.
Méthode 4. Image de la mise en œuvre PHP Étiré Image en plein écran
Quelques mots sur la langue même. PHP est coutume appelé langage de script. Avec elle, ils écrivent une partie du serveur d'applications Web, c'est-à-dire Bind service avec une base de données, des demandes de processus, etc. Le code PHP lui-même est intégré au HTML et interagit de manière flexible avec elle.
Pour insérer un morceau de code, vous devez enregistrer le texte de ces crochets:
Et maintenant, dans l'exemple initial, vous devez insérer uniquement quelques lignes:
| 1 2 3 4 5 |
Détecté cette leçon sur un canal YouTube. Chuce très utile pour le concepteur Web à mon avis.
Parfois, la largeur de l'image d'origine ne suffit pas pour une idée de concepteur et son étirement de largeur déforme les objets nécessaires. Pour enregistrer ces objets en toute sécurité et en même temps étirer l'image de l'image, Photoshop nous fournit certains outils. Et ainsi, finalement nous avons de l'image originale:
Il devrait s'agir de ceci:
Continuons. Ouvrez notre image dans Photoshop et allouez l'objet dont vous avez besoin:
Ensuite, allez à l'onglet Sélection \u003e\u003e Enregistrez la zone sélectionnée
Et définissez tout nom arbitraire pour cette sélection:
Ainsi, nous avons créé une zone qui sera ultérieurement protégée des modifications. Prochaine étape aller à Édition \u003e\u003e Échelle prenant en compte le contenu:
Et assurez-vous de spécifier l'objet protégé:
Tout. Il reste seulement de changer la largeur de l'image à l'aide d'outils standard (dans le panneau supérieur en modifiant le pourcentage de largeur, ou simplement tirer sur l'image). Important Avant ceci (ou à la première étape), changez la taille de la toile afin que les limites de l'image ne dépassent pas sa portée.
Une tâche
Étirez l'image de fond sur toute la largeur de la fenêtre du navigateur à l'aide de CSS3.
Décision
La propriété de taille d'arrière-plan est conçue pour augmenter l'arrière-plan, 100% est spécifiée comme valeur, puis l'arrière-plan occupera toute la largeur de la fenêtre du navigateur. Pour les versions plus anciennes de navigateurs, utilisez des propriétés spécifiques avec des préfixes, comme indiqué dans l'exemple 1.
Exemple 1. Fond de traction
HTML5 CSS 2.1 IE CR OP SA FX
Le résultat de cet exemple est illustré à la Fig. une.
Figure. 1. Vue de l'arrière-plan avec une taille de fenêtre réduite
Avec la taille croissante de la fenêtre du navigateur, l'arrière-plan commencera également à être étendu, cela entraînera une détérioration du type d'image (Fig. 2).
Figure. 2. Vue de l'arrière-plan avec une taille de fenêtre agrandie
Le but de cette leçon d'envisager des moyens d'organiser une image d'arrière-plan pour un site Web, qui sera toujours étiré à toute la fenêtre du navigateur.
Technique utilisant uniquement CSS. Partie 1.
Utilisez l'élément minuscule dont les dimensions peuvent être modifiées dans n'importe quel navigateur. Installez la propriété MIN-Hauteur pour remplir la fenêtre du navigateur verticalement et la propriété de largeur attribue une valeur de 100% à remplir horizontalement. Installez également la propriété min-largeur égale à la largeur de l'image afin qu'elle n'a jamais diminué.
La course délicate consiste à utiliser la demande de support pour vérifier que la largeur de la fenêtre du navigateur est inférieure à la largeur de l'image et à l'aide de la combinaison pourcentage de la propriété gauche et de la valeur négative du champ gauche pour cœur l'image d'arrière-plan.
Voici le code CSS:
Img.bg (/ * Définissez les règles pour remplir l'arrière-plan * / min-hauteur: 100%; min-largeur: 1024px; / * Définissez le rapport de proportionnalité * / Largeur: 100%; Hauteur: auto; / * Installation de positionnement * / Position: fixe; TOP: 0; gauche: 0;) @media écran et (max-largeur: 1024px) (/ * déterminé par son pour chaque image spécifique * / img.bg (gauche: 50%; gauche: 50%; -512px; / * cinquante% * /))
Travaille dans:
Toute versions d'un navigateur normal: Safari / Chrome / Opera / Firefox.
IE 6: Cela ne fonctionne pas - mais vous pouvez utiliser certaines des astuces pour le positionnement.
Ie 7/8: Dans la plupart des cas, cela fonctionne, ne centriste pas de petites images, mais remplit correctement l'écran.
IE 9: Travaux.
Technique utilisant uniquement CSS. Partie 2.
Une autre façon de résoudre la tâche est de placer un élément minuscule. Sur la page, fixez sa position dans le coin supérieur gauche et définissez la valeur de 100% pour ses propriétés min-largeur et min-hauteur, tout en maintenant le coefficient de proportionnalité.
#Bg (position: fixe; haut: 0; gauche: 0; / * Nous enregistrons le rapport de proportionnalité * / min-largeur: 100%; min-hauteur: 100%;)
Cependant, l'image n'est donc pas centrée. Alors enveloppez l'image dans l'élément
#Bg (position: fixe; haut: -50%; gauche: -50%; largeur: 200%; hauteur: 200%;) #bg img (position: absolu; haut: 0; gauche: 0; droite: 0; Bas: 0; marge: auto; min-largeur: 50%; hauteur min-hauteur: 50%;)
Travaille dans:
Safari / Chrome / Firefox (non testé sur toutes les versions, mais dans ce dernier fonctionne bien).
C'est-à-dire 8+.
Opera (n'importe quelle version) et IE refusent de travailler avec cette méthode (positionnement d'image incorrect).
Nous utilisons jQuery
L'idée est très simple si le rapport de la proportionnalité de l'image (élément minuscule Il sera utilisé comme fond) par rapport au coefficient de la proportionnalité de la fenêtre du navigateur. Si c'est moins pour l'image, vous devez assigner seul Largeur Image Propriété La valeur est de 100% et remplira l'écran et en hauteur et en largeur. Et si plus, puis assignez seul Hauteur Image Propriété La valeur est de 100%.
#Bg (position: fixe; top: 0; gauche: 0;) .bwidth (largeur: 100%;) .BGheight (hauteur: 100%;)
$ (Fonction () (var thewindow \u003d $ (fenêtre), $ bg \u003d $ ("# bg"), aspradio \u003d $ bg.width () / $ bg.height (); fonction resizebg () (ifindow .Width ( ) / thewindow.height ())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
Travaille dans:
IE7 + (avec des bouchons fonctionnera probablement dans IE6)
Dans tous les autres navigateurs.
Conclusion
L'une des méthodes de solution a ses avantages et ses inconvénients. Vous devez juste choisir un cas approprié. Bien, ou suggérez votre propre.