Maison > interface Web > tutoriel CSS > le corps du texte

Introduction à l'image d'arrière-plan CSS3

高洛峰
Libérer: 2017-03-16 10:39:49
original
1946 Les gens l'ont consulté

Ici, nous allons présenter comment définir l'image d'arrière-plan via background-image, ainsi que des opérations telles que la mosaïque, l'étirement, le décalage et la définition de la taille de l'image d'arrière-plan. .

1. Classification des styles d'image d'arrière-plan

Les attributs qui définissent les images d'arrière-plan des éléments et leurs styles d'image d'arrière-plan en CSS sont principalement les suivants :

background-image : Définissez l’image d’arrière-plan de l’élément.

background-repeat : définissez la manière de mosaïquer l'image d'arrière-plan.

background-attachment : Définissez si l'image d'arrière-plan est fixe ou se déplace avec le défilement.

background-position : Définissez la position de l'image d'arrière-plan.

background-size : Définissez la taille de l'image d'arrière-plan.

Chaque attribut sera expliqué en détail ci-dessous.

2. background-image : Définir l'image d'arrière-plan de l'élément

Description  : Vous pouvez définir une ou plusieurs images d'arrière-plan de l'élément .

Syntaxe : [ , aucun

Valeur par défaut : aucune. //Ne définit pas l'image d'arrière-plan de l'élément.

Extensions : spécification W3C, informations MDN

2.1 Définir un seul Image d'arrière-plan

Description  : Par défaut, les images d'arrière-plan sont en mosaïque horizontalement et verticalement.


background-image:url('res/bgA.jpg')
Copier après la connexion

关于CSS3 background-image背景图片介绍

2.2 Définir plusieurs images d'arrière-plan

Instructions : Lors du rendu, l'image d'arrière-plan au recto se trouve sur le calque supérieur et l'image d'arrière-plan au verso est sur le calque inférieur.


background-image:url('res/bgA.jpg'),url('res/bgB.jpg');
background-repeat:no-repeat;
Copier après la connexion

关于CSS3 background-image背景图片介绍

3. background-repeat : définissez l'effet de mosaïque de l'image d'arrière-plan

Instructions : Définissez l'effet de carrelage de l'image d'arrière-plan, y compris horizontal et vertical.

Syntaxe : [ , ]*

<repeat-style>= repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
Copier après la connexion

Valeur par défaut : répéter //Carrelage horizontal et vertical

Extensions : spécifications W3C, informations MDN

3.1 background-repeat:repeat-x | répéter-x | répéter-y

Instructions : Définissez l'image d'arrière-plan pour qu'elle soit carrelée horizontalement et verticalement.

Exemple :


background-repeat:repeat-x; /* 表示水平平铺 */

background-repeat:repeat-y; /* 表示垂直平铺 */

background-repeat:repeat-x repeat-y; /* 水平和垂直平铺(默认) */
Copier après la connexion

关于CSS3 background-image背景图片介绍

Arrière-plan 3.2- repeat:space | round | no-repeat

Description : Définissez d'autres effets de mosaïque de l'image d'arrière-plan.

Exemple :


background-repeat:space; /* 均匀的平铺背景图片,不会被裁剪 */

background-repeat:round; /* 水平和垂直平铺背景图片,拉伸图片以尽可能的填充背景,不会被裁剪 */

background-repeat:no-repeat; /* 不进行平铺 */
Copier après la connexion

关于CSS3 background-image背景图片介绍

4. -attachment : Définissez si l'image d'arrière-plan est fixe ou se déplace avec le défilement

Description : Définissez si l'image d'arrière-plan est fixe ou se déplace avec le défilement.

Syntaxe : [, ]*

<attachment>= scroll | fixed | local
Copier après la connexion

Valeur par défaut : scroll // L'image d'arrière-plan suit la barre de défilement et continue de défiler

Extensions : spécifications W3C, informations MDN


background-attachment:scroll; /* 跟随滚动条一起滚动。(默认) */

background-attachment:fixed; /* 背景图片固定位置,不随着滚动条滚动 */

background-attachment:local; /* 跟随内容一起滚动 */
Copier après la connexion

4.1 background-attachment:scroll; // Continuez à faire défiler avec le défilement bar. (Par défaut)

关于CSS3 background-image背景图片介绍

4.2 background-attachment:local; // Faire défiler le contenu

关于CSS3 background-image背景图片介绍

5. background-position :设置背景图片的位置

说明:设置背景图片的位置,可设置背景图片的4个边角水平和纵向的起始位置。

语法 [ , ]*

默认值:0% 0% // 背景图片左上角定位于容器左上角

扩展:W3C规范、MDN资料

5.1 background-position:10px; // 背景图片水平方向与左边缘相距10px,垂直居中

关于CSS3 background-image背景图片介绍

5.2 background-position:10px 20px; // 背景图片水平方向与左边缘相距0px,垂直方向与顶部边缘相距20px

关于CSS3 background-image背景图片介绍

5.3 background-position:left 10px bottom 20px; // 背景图片水平方向与左边缘相距10px,垂直方向与底部边缘相距20px

关于CSS3 background-image背景图片介绍

6. background-size :设置背景图片的大小

说明:设置背景图片的大小。

语法: [ , ]*

<bg-size>= [<length>|<percentage>| auto ]{1,2} | cover | contain
Copier après la connexion

默认值:auto auto // 背景图片的原始大小

扩展:W3C规范、MDN资料

示例


background-size:100px; /* 背景图片宽度为100px,高度为auto */

background-size:100px 50%; /* 背景图片宽度为100px,高度为容器高度的50% */

background-size:100% 100%; /* 背景图片宽度为容器宽度的100%,高度为容器高度的100% */
Copier après la connexion

关于CSS3 background-image背景图片介绍

 

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!