Rendre le blanc transparent. Comment rendre une couleur transparente dans Photoshop ? Définir la transparence pour l'arrière-plan css

Dans certains cas, par exemple, lors de la conception d'un site, vous pouvez rencontrer une situation où l'arrière-plan de l'image ne correspond en aucun cas à la couleur du site lui-même. La solution évidente est de rendre ce fond transparent.

Tu auras besoin de

• - Adobe Photoshop.

Instructions

Comment définir la couleur transparente en css? Pour le moment, il y a 3 façons de le faire.

Méthode 1 - la valeur transparente

Si vous définissez la valeur de la couleur du texte ou de l'arrière-plan sur transparent, la couleur sera alors complètement transparente, c'est-à-dire invisible. Exemple:

Couleur : transparente ;

Ce texte ne sera pas visible sur la page.

Méthode 2 - mode couleur rgba

Et c'est déjà une innovation css3. Auparavant, un tel mode n'existait pas dans le développement Web, il n'y avait que du RVB. Vous savez probablement comment écrire la couleur dans ce format. Pour ce faire, vous devez spécifier entre parenthèses trois valeurs de 0 à 255, indiquant la saturation d'une des trois couleurs primaires (rouge, vert, bleu). Par exemple:

Arrière-plan : rvb (230, 121, 156) ;

Le format rgba n'est pas différent, seule une quatrième valeur est ajoutée - le degré de transparence de l'élément de 0 à 1. En général, ce format de notation est principalement utilisé pour spécifier une couleur semi-transparente, pas complètement transparente. Pour obtenir une transparence totale, il vous suffit d'écrire 0 comme quatrième valeur.

Arrière-plan : rgba (0, 0, 0, 0);

Dans ce cas, les 3 chiffres restants ne jouent pas de rôle particulier.

La couleur semi-transparente peut être définie si le quatrième paramètre est défini sur une valeur de 0,01 à 0,99. J'ai déjà écrit un peu sur la définition de la translucidité de l'arrière-plan, vous pouvez le lire si cela vous intéresse.

Méthode 3 - opacité

Une autre propriété de la technologie CSS3. Mais je tiens à vous prévenir tout de suite que cela fonctionne un peu différemment. L'opacité est utilisée pour définir l'opacité de l'ensemble du bloc auquel elle est appliquée. Ainsi, la lisibilité du texte et la perception des images se dégradent. Donc, je vois le sens d'appliquer la propriété uniquement pour les blocs dans lesquels il n'y a pas de texte ou toute autre information. Les valeurs peuvent être définies de 0 à 1, comme c'est le cas avec le quatrième paramètre lors de la spécification d'une couleur au format rgba.

En général, pour le moment, ce sont tous les moyens que je connais pour définir une couleur transparente en css. Pourquoi cela est nécessaire est une autre question. Ce qui est en dessous peut être vu à travers le fond transparent. Parfois, cela doit être fait par conception. De manière générale, la technique avec translucidité est très courante aujourd'hui.

Arrière-plan transparent

Comme vous le savez probablement, background est une propriété CSS qui vous permet de définir une couleur d'arrière-plan ou de charger une image pour servir d'arrière-plan.

Définir la transparence pour l'arrière-plan css

Tout cela est donc très facile grâce au format de notation des couleurs rgba. Si vous travaillez avec des éditeurs graphiques, alors vous savez sans doute que le mode couleur rgb se déchiffre comme suit : la proportion de rouge (rouge), la proportion de vert (vert) et de bleu (bleu). Ainsi, rgba est pratiquement le même, un seul paramètre supplémentaire est ajouté - la transparence. Il s'écrit ainsi :

Couleur de fond : rgba (173, 57, 22, 0,5)

Tout d'abord, nous indiquons explicitement que nous définissons la couleur en mode rgba. Ensuite, nous spécifions les valeurs de saturation des trois couleurs primaires de 0 à 255, où 255 est la saturation la plus élevée. Le quatrième paramètre est notre transparence. Une valeur de 0 à un est écrite ici. 1 est totalement opaque et 0 est totalement transparent. Par conséquent, si vous le définissez sur 0, la couleur d'arrière-plan ne sera pas du tout visible.

Vous savez maintenant comment définir la transparence pour la propriété background en css. Pour ce faire, vous devez utiliser le mode couleur rgba. Il existe également la propriété d'opacité, mais elle s'applique à l'ensemble de l'élément dans son ensemble. C'est-à-dire que lorsque l'opacité est appliquée, la transparence peut également être appliquée au texte, le rendant illisible.

Fond transparent par exemple

Les avantages d'un fond translucide sont faciles à montrer avec un exemple. Par exemple, nous avons un arrière-plan général pour une page. Voici à quoi ressemblerait le bloc s'il recevait une couleur noire unie :

Et maintenant, définissons la même couleur noire pour le bloc, mais indiquons-la en utilisant le format de couleur rgba, en spécifiant la dernière valeur en 0.7, par exemple. Il s'avère comme ceci :

Maintenant, l'arrière-plan du bloc est visible et l'image d'arrière-plan est visible à travers lui. Cette image et l'arrière-plan sont uniquement à des fins d'illustration. Comme vous pouvez l'imaginer, la transparence dans l'arrière-plan CSS peut être utile lorsque vous avez besoin que l'arrière-plan d'un élément imbriqué soit visible, sans masquer les autres arrière-plans situés dans d'autres calques.

La couleur elle-même n'est pas difficile à définir en utilisant rgba. Comme déjà mentionné - les trois premières lettres signifient trois couleurs primaires: rouge, vert et bleu, ou plutôt leur part (de 0 à 255). En prescrivant différentes valeurs, vous pouvez obtenir des millions de couleurs différentes, et la translucidité vous permettra de créer de nombreux effets magnifiques pour le site, si nécessaire.

L'essentiel est de spécifier une image sur votre ordinateur ou votre téléphone, puis de cliquer sur le bouton OK en bas de cette page. Par défaut, le fond uni de l'image est remplacé par un fond transparent. La couleur de fond de l'image d'origine est déterminée automatiquement, il vous suffit de spécifier dans les paramètres par quelle couleur la remplacer. Le paramètre principal affectant la qualité du remplacement est « Intensité du remplacement » et pour chaque image, il peut être différent.

Un exemple de photo d'une rose rose sans modifications et après avoir remplacé le fond uni par du transparent, du blanc et du vert :

Premier exemple avec une fleur de rose sur fond transparent réalisée avec les réglages suivants :
1) L'intensité du remplacement - 38;
2) Anti-aliasing le long des bords - 5;
3) Remplacez le fond uni par du transparent ;
4) Recadrage (<0) или Добавление (>0) sur les bords - "-70";
5) Inverser - désactivé (pas de case à cocher).

Pour créer deuxième exemple, avec un fond blanc, les mêmes paramètres ont été utilisés que dans le premier exemple, à l'exception du paramètre : "Remplacer le fond uni par" - blanc. DANS troisième exemple, sur fond vert, les paramètres sont également utilisés, comme dans le premier exemple, à l'exception du paramètre : "couleur en hexadécimal" - # 245a2d.

L'image originale ne change en aucune façon. Vous recevrez une autre image traitée avec un fond transparent ou spécifié.