Maison > interface Web > tutoriel HTML > Explication détaillée d'exemples d'images d'arrière-plan en CSS

Explication détaillée d'exemples d'images d'arrière-plan en CSS

零下一度
Libérer: 2017-06-24 13:37:42
original
1106 Les gens l'ont consulté

Paramètres de l'image d'arrière-plan du corps

Premier type : Dans ce cas, l'image d'arrière-plan peut être mise à l'échelle mais ne peut pas être complètement proportionnelle

arrière-plan: url(imgs/1.jpg)no-repeat;

position-arrière-plan: centre 0; L'origine du positionnement de l'image d'arrière-plan est très incertaine en raison de la grande incertitude du corps

background-attachment:fixed; L'image d'arrière-plan reste fixe et ne défilera pas lorsque la page défile

Deuxième : Dans ce cas, l'image d'arrière-plan sera complètement mise à l'échelle proportionnellement, à mesure que la taille de la fenêtre change

Définissez d'abord la hauteur HTML : 100 % ;

Défini pour le corps

arrière-plan : url(imgs/1. jpg) no-repeat;

background-size: 100% 100%; la valeur est la couverture, ceci Dans ce cas, tant qu'un côté touche le bord de la fenêtre, il s'arrêtera Dans ce cas, l'image d'arrière-plan ne sera pas mise à l'échelle proportionnellement

<.>De même,

Si vous souhaitez que la largeur et la hauteur de l'élément dans le corps soient de 100 %,

Première méthode :

Définissez d'abord la hauteur : 100 % pour le HTML ; puis définissez la largeur : 100 % ; la hauteur : 100 % ;

Deuxième méthode : Donnez Lorsque vous définissez la largeur/hauteur à 100 %, vous devez également définir la position : fixe ;

Si la page utilise une saisie, son contour et sa bordure par défaut doivent être supprimé. Si la bordure par défaut est utilisée, lorsque js est modifié ultérieurement, il y aura un léger décalage de pixels lors de la première interaction. Il est recommandé de réinitialiser

<. linkrel=" icône de raccourci " href="imgs/favicon.ico"/> Placez cette phrase dans le titre de la page html

Afficher le texte verticalement en html

Définir la largeur de l'objet texte ne peut organiser que la largeur de la distance de texte suivante, de sorte que le texte ne puisse pas contenir deux caractères sur une ligne, de sorte que le texte s'enroule automatiquement, formant une exigence de composition verticale

À ce stade, vous devez ajouter

word-wrap:break-word; peut réaliser la ponctuation et le retour à la ligne, et en même temps l'affichage vertical global

mode d'écriture : définissez la direction d'écriture de l'objet, il y a deux valeurs,

1.lr-tb : de gauche à droite, de haut en bas,

2. tb-rl : de haut en en bas, de droite à gauche


Exécutez le code et constatez que IE affiche normalement, Firefox et Google Chrome Il n'est pas pris en charge, il n'est donc pas recommandé d'utiliser l'écriture- attribut mode

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:
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