Accueil Médias sociaux Comment modifier l'image d'arrière-plan pour la programmation HTML5 et CSS3 - mannequins

Comment modifier l'image d'arrière-plan pour la programmation HTML5 et CSS3 - mannequins

Table des matières:

Vidéo: 12 - HTML & CSS - Image du fond 2025

Vidéo: 12 - HTML & CSS - Image du fond 2025
Anonim

Vous pouvez utiliser la balise img pour ajouter une image à votre page HTML5, mais parfois vous voulez utiliser les images comme arrière-plan pour un élément spécifique ou pour la page entière. Vous pouvez utiliser la règle CSS background-image pour appliquer une image d'arrière-plan à une page ou à des éléments d'une page.

Les images d'arrière-plan sont faciles à appliquer. Le code pour backgroundImage. html montre comment:

backgroundImage. corps html {background-image: url ("cordeBG.jpg");} h1 {image-arrière-plan: url ("ropeBGLight.jpg");} p {background-color: white; background-color: rgba (255, 255, 255, 85);}

Utilisation des images d'arrière-plan

Le titre utilise une version plus claire de l'arrière-plan et le paragraphe utilise un fond de couleur claire avec transparence.

Le titre utilise une version plus claire de l'arrière-plan et le paragraphe utilise un arrière-plan de couleur unie avec une transparence claire.

Joindre l'image d'arrière-plan à un élément via CSS n'est pas difficile. Voici les étapes générales:

  1. Trouvez ou créez une image appropriée et placez-la dans le même répertoire que la page afin qu'elle soit facile à trouver.

  2. Attachez la règle de style d'image d'arrière-plan à la page à laquelle vous souhaitez appliquer l'image.

    Si vous souhaitez appliquer l'image à la page entière, utilisez l'élément.

  3. Dites CSS où background-image est en ajoutant un identifiant d'URL.

    Utilisez le mot-clé url () pour indiquer que l'adresse suivante est une adresse.

  4. Entrez l'adresse de l'image.

    C'est plus facile si l'image est dans le même répertoire que la page. Si c'est le cas, vous pouvez simplement taper le nom de l'image. Assurez-vous d'entourer l'URL avec des guillemets.

  5. Testez votre image d'arrière-plan en affichant la page Web dans votre navigateur.

    Beaucoup d'erreurs peuvent survenir avec les images d'arrière-plan. L'image peut ne pas être dans le bon répertoire, vous avez peut-être mal orthographié son nom, ou vous avez peut-être oublié le bit.

Vérification des antécédents

Il est assez facile d'ajouter des arrière-plans, mais les images d'arrière-plan ne sont pas parfaites. Voici une page avec un joli fond. Malheureusement, le texte est difficile à lire.

Les images d'arrière-plan peuvent ajouter beaucoup de zing à vos pages, mais elles peuvent introduire certains problèmes, tels que

  • Les images d'arrière-plan peuvent ajouter à la taille du fichier. Les images sont très volumineuses, donc une grande image de fond peut rendre votre page beaucoup plus grande et plus difficile à télécharger.

  • Certaines images peuvent rendre votre page plus difficile à lire. Une image en arrière-plan peut interférer avec le texte, de sorte que la page peut être beaucoup plus difficile à lire.

  • Les bonnes images ne font pas de bons arrière-plans. Une bonne image attire l'attention et attire l'attention. Le travail d'une image de fond est de fondre en arrière-plan. Si vous voulez que les gens regardent une image, intégrez-la. Les images d'arrière-plan ne doivent pas sauter au premier plan.

  • Les fonds doivent être à faible contraste. Si votre image d'arrière-plan est sombre, vous pouvez rendre le texte clair visible. Si l'image d'arrière-plan est claire, le texte sombre apparaît. Si votre image a des zones de lumière et d'obscurité (comme presque toutes les bonnes images), il sera impossible de trouver une couleur de texte qui semble bonne contre elle.

Comment modifier l'image d'arrière-plan pour la programmation HTML5 et CSS3 - mannequins

Le choix des éditeurs

Développez votre application iOS avec Storyboarding - des mannequins

Développez votre application iOS avec Storyboarding - des mannequins

Pour développer votre application iPhone ou iPad, que vous utilisez Interface Builder pour ajouter graphiquement des éléments de l'interface utilisateur à chacune de vos vues dans le storyboard (pensez simplement aux vues en tant que conteneurs pour afficher ce que vous voyez sur l'écran de l'iPad). Dans ce contexte, les éléments de l'interface utilisateur incluent des contrôles, des images et des espaces réservés ...

Téléchargement d'outils pour développer des applications pour Windows Phone 7 - nuls

Téléchargement d'outils pour développer des applications pour Windows Phone 7 - nuls

Pour commencer à développer des applications Windows Phone 7, vous avez besoin d'outils de base. Heureusement, App Hub de Microsoft est tout au sujet de Windows Phone 7. Suivez ces étapes, en utilisant le PC que vous prévoyez d'utiliser pour le développement: Allez à l'App Hub. Cliquez sur le lien dans le coin supérieur gauche qui dit "Télécharger les outils gratuits. "Dans le ...

ÉDiteur Editeurs de contenu de zone dans Xcode - dummies

ÉDiteur Editeurs de contenu de zone dans Xcode - dummies

La zone Editeur de Xcode a un certain nombre d'éditeurs utiliser pour éditer un contenu spécifique. Les éditeurs de contenu sont basés sur le contexte, ce qui signifie que vous effectuez la sélection dans une barre de défilement Navigator ou Editeur - la barre d'outils qui apparaît en haut de chaque volet de la zone Éditeur et permet de naviguer dans les fichiers ...

Le choix des éditeurs

Comment modifier l'image d'arrière-plan pour la programmation HTML5 et CSS3 - mannequins

Comment modifier l'image d'arrière-plan pour la programmation HTML5 et CSS3 - mannequins

Pouvez utiliser la balise img pour ajouter une image à votre page HTML5, mais parfois vous voulez utiliser les images comme arrière-plan pour un élément spécifique ou pour la page entière. Vous pouvez utiliser la règle CSS background-image pour appliquer une image d'arrière-plan à une page ou à des éléments d'une page. Images d'arrière-plan ...

Comment choisir un format d'image Web pour vos pages Web HTML5 et CSS3 - des mannequins

Comment choisir un format d'image Web pour vos pages Web HTML5 et CSS3 - des mannequins

Avec autant d'options différentes de format d'image Web disponibles pour vos pages Web HTML5 et CSS3, cela peut sembler accablant. Mais, choisir un format d'image est facile parce que chaque format a ses propres avantages et inconvénients. Jetez un coup d'oeil pour savoir quel format vous convient le mieux: GIF est le meilleur quand vous avez besoin de transparence ...

Le choix des éditeurs

Comment utiliser les opérateurs génériques lors de la recherche de contenu dans Word 2016 - Les tuls

Comment utiliser les opérateurs génériques lors de la recherche de contenu dans Word 2016 - Les tuls

2016 Vous le permet utiliser des opérateurs génériques dans les recherches. Un opérateur générique est un caractère qui représente des caractères dans une expression de recherche. Les caractères génériques ne sont pas pour tout le monde. Leur utilisation nécessite une certaine expertise, mais une fois que vous savez comment les utiliser, les caractères génériques peuvent être précieux dans les recherches et les macros. Le tableau suivant explique ...

Comment utiliser la vue d'ensemble de Word 2010 - mannequins

Comment utiliser la vue d'ensemble de Word 2010 - mannequins

La fonction d'aperçu de 2010 vous permet de regrouper des idées ou des éléments d'une manière hiérarchique. Vous pouvez ensuite mélanger les sujets, créer des sous-rubriques et jeter des idées et des concepts pour organiser vos pensées. Vous pouvez utiliser le mode Contour de Word pour créer des listes, travailler sur des projets ou avoir l'air occupé lorsque ...

Comment travailler avec la toile de dessin dans Word 2016 - mannequins

Comment travailler avec la toile de dessin dans Word 2016 - mannequins

Formes et lignes sont un grand manière d'illustrer des idées dans les documents Office 2016. Vous pouvez en effet griffonner sur la page et donner aux lecteurs un autre aperçu de ce que vous voulez expliquer. Toutefois, dans Word 2016, le dessin de lignes et de formes pose problème, à moins que vous ne les dessiniez sur le canevas de dessin. La toile de dessin fonctionne ...