Maison > Article > interface Web > Comment définir l'arrière-plan pour qu'il soit centré et non carrelé en CSS

Comment définir l'arrière-plan pour qu'il soit centré et non carrelé en CSS

WBOYoriginal: 2022-04-20 17:29:002767parcourir

En CSS, vous pouvez utiliser "background:url(path) no-repeat center;" pour définir l'arrière-plan pour qu'il soit centré et non en mosaïque. L'attribut background est utilisé pour définir le style d'arrière-plan de l'élément. " est utilisé pour indiquer que l'arrière-plan n'est pas carrelé. Centre Utilisé pour indiquer que l'arrière-plan est centré.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment définir l'arrière-plan pour qu'il soit centré et non carrelé en CSS

Utilisez simplement l'attribut background.

L'attribut d'abréviation d'arrière-plan peut définir tous les attributs d'arrière-plan dans une seule instruction.

Séparez chaque valeur par un espace, sans ordre particulier. Il est possible que seules certaines de ces valeurs, comme background : #FF0000 URL (smiley.gif) soient autorisées.

Les attributs pouvant être définis sont :

background-color Spécifiez la couleur d'arrière-plan à utiliser
background-position Spécifiez la position de l'image d'arrière-plan
background-size Spécifiez la taille de l'image d'arrière-plan. background image
background-repeat Spécifie comment répéter l'image d'arrière-plan Si l'image est fixe ou suit la page Le reste du défilement.
background-image Spécifiez une ou plusieurs images d'arrière-plan à utiliser
Les exemples sont les suivants :

<html>
<head>
<style type="text/css">
body
{ 
background: url(/i/eg_bg_03.gif) no-repeat center; 
}
</style>
</head>
<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>

Résultats de sortie :
(Partage vidéo d'apprentissage :
tutoriel vidéo CSS

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!

html5 css css3 position background

Déclaration：

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

Article précédent：Comment changer la classe div avec jqueryArticle suivant：Comment changer la classe div avec jquery

Articles Liés

Voir plus