pourcentage défini par CSS

CSS est un langage de feuille de style utilisé pour la conception Web, dans lequel la définition des pourcentages joue un rôle particulier dans la conception Web. En définissant le pourcentage, nous pouvons contrôler plus précisément la taille, la position, la couleur, l'arrière-plan, etc. des éléments, rendant la page Web plus belle et plus professionnelle. Cet article vous donnera une introduction détaillée sur la façon de définir des pourcentages en CSS.

1. Définir le pourcentage de la taille de l'élément

En CSS, nous pouvons définir le pourcentage de la largeur et de la hauteur de l'élément. Ceci est utile pour créer des sites Web avec un design réactif.

Par exemple, nous pouvons créer un conteneur qui contient le contenu principal de la page Web. Nous utilisons des pourcentages pour définir la largeur et la hauteur du conteneur afin qu'il se redimensionne automatiquement en fonction de la taille de l'écran de l'utilisateur. Par exemple :

.container {
  width: 80%;
  height: 50%;
}

Dans cet exemple, la largeur et la hauteur du conteneur sont définies en pourcentages, respectivement 80 % et 50 %. Cela signifie que quelle que soit la taille de l'écran de l'utilisateur, le conteneur se redimensionnera automatiquement et s'affichera correctement sur n'importe quel appareil.

2. Définir le pourcentage de position de l'élément

En utilisant des pourcentages, nous pouvons également définir la position de l'élément par rapport à son conteneur. Ceci est utile pour concevoir un site Web centré ou adaptatif. Par exemple :

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Dans cet exemple, nous utilisons des pourcentages pour positionner l'élément afin qu'il apparaisse centré dans son conteneur. On positionne d'abord l'élément de manière absolue en utilisant position:absolute puis on le positionne relativement en utilisant top:50% et left:50% Son conteneur est centré . Enfin, nous utilisons transform:translate(-50%,-50%) pour affiner la position de l'élément afin qu'il soit centré. position:absolute将元素定位为绝对定位，然后使用top:50%和left:50%将其位置相对于其容器居中定位。最后，我们使用transform:translate(-50%,-50%)将元素的位置进行微调，使其居中。

三、设置颜色和背景百分比

还可以使用百分比来设置颜色和背景。例如：

h1 {
  color: rgba(100%,0%,0%,0.5);
  background: linear-gradient(90deg, rgba(100%,0%,0%,0.6) 0%, rgba(100%,0%,0%,0) 100%);
}

在这个例子中，我们使用百分比来设置文本和背景的透明度。具体来说，我们将文本的颜色设置为红色，并将其透明度设置为50%。而背景则使用linear-gradient

3. Définir la couleur et le pourcentage d'arrière-plan

Vous pouvez également utiliser le pourcentage pour définir la couleur et l'arrière-plan. Par exemple :

rrreee

Dans cet exemple, nous utilisons des pourcentages pour définir la transparence du texte et de l'arrière-plan. Plus précisément, nous définissons la couleur du texte sur rouge et sa transparence sur 50 %. Pour l'arrière-plan, utilisez linear-gradient pour définir un arrière-plan dégradé rouge et également dégradé la transparence de 60 % à 0 %. De cette façon, nous pouvons créer un texte et un effet d’arrière-plan semi-transparents. 🎜🎜Résumé🎜🎜Cet article explique comment utiliser les pourcentages en CSS pour définir la taille, la position, la couleur et l'arrière-plan des éléments. Les pourcentages sont utiles pour concevoir des sites Web réactifs et obtenir des effets de conception tels que le centrage. Que vous soyez débutant ou développeur expérimenté, vous pouvez créer des conceptions Web impressionnantes en utilisant des pourcentages en 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!