Propriétés d'arrière-plan du didacticiel de base CSS

Propriétés d'arrière-plan CSS

background-color : couleur d'arrière-plan.
background-image : adresse de l'image d'arrière-plan. Par exemple : background-image:url(images/bg.gif)
background-repeat : mode de mosaïque d'arrière-plan, valeur : no-repeat (pas de mosaïque) , répéter-x (direction horizontale), répéter-y (direction verticale)
background-position : positionnement en arrière-plan. Format : position d'arrière-plan : positionnement horizontal, positionnement vertical ;

Positionnement en mots anglais : position d'arrière-plan : gauche | centre | haut droit | |bottom;
Position avec une valeur fixe : background-position: 50px 50px; //L'arrière-plan est à 50px du côté gauche du conteneur et à 50px du haut du conteneur
Utiliser le positionnement en pourcentage : background-position : 50 % 50% ; //Centre horizontal, centre vertical
Utiliser le positionnement mixte : background-position : left 10px; //Arrière-plan à gauche 10px à partir du haut du conteneur Méthode de mosaïque Méthode de positionnement

Exemple : background:url(images/bg. gif) centre sans répétition ;

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
        .box1{
            background-color:#f0f0f0;
            width:400px;
        }
        .box2{
            background-image:url(http://img1.imgtn.bdimg.com/it/u=1182781053,1047826690&fm=21&gp=0.jpg);
            background-repeat:no-repeat;
            background-position:center center;
            width:400px;
            height:400px;
        }
    </style>
    </head>
    <body>
        <div class="box1">
        <h1>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
        </div>
        <div class="box2">
            
        </div>
    </body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> .box1{ background-color:#f0f0f0; width:400px; } .box2{ background-image:url(http://img1.imgtn.bdimg.com/it/u=1182781053,1047826690&fm=21&gp=0.jpg); background-repeat:no-repeat; background-position:center center; width:400px; height:400px; } </style> </head> <body> <div class="box1"> <h1>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </div> <div class="box2"> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Propriétés d'arrière-plan du didacticiel de base CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]