Dans cette leçon, nous examinerons ces CSS propriétés - opacité Et RVBA. Propriété Opacité n'est responsable que de la transparence des éléments et du fonctionnement RVBA– pour la couleur et la transparence, si vous spécifiez la valeur de transparence du canal alpha.

Transparence CSS Opacité

Valeur numérique pour opacité défini dans la plage de 0,0 à 1,0, où zéro est une transparence complète et un, au contraire, est une opacité absolue. Par exemple, pour obtenir une transparence de 50 %, vous devez définir la valeur sur 0,5. Il faut garder à l'esprit que opacité se propage à tous les éléments enfants du parent. Cela signifie que le texte sur un fond translucide sera également translucide. Et c'est déjà très inconvénient majeur, le texte ne ressort pas non plus.

La capture d'écran montre clairement que le texte noir est devenu aussi translucide que le fond bleu.

Div (
arrière-plan : url(images/votreimage.jpg); /* Image de fond */
largeur : 750 px ;
hauteur : 100px ;
marge : auto ;
}
.bleu (
arrière-plan : #027av4 ; /* Couleur du sol arrière-plan transparent */
opacité : 0,3 ; /* Valeur de translucidité du fond */
hauteur : 70px ;
}
h1 (
remplissage : 6 px ;
famille de polices : Arial Black ;
poids de la police : plus gras ;
taille de police : 50 px ;
}

Transparence CSS au format RGBA

Format d'enregistrement des couleurs RVBA, est plus alternative moderne pour la propriété opacité. R (rouge), G (vert), B (bleu)- signifie : rouge, vert, bleu. Dernière lettre UN– signifie canal alpha, qui définit la transparence. RVBA Contrairement à Opacité n'affecte pas les éléments enfants.

Regardons maintenant notre exemple en utilisant RVBA. Remplaçons ces lignes dans les styles.

Contexte : ##027av4 ; /* Couleur de l'arrière plan */
opacité : 0,3 ; /* valeur de translucidité du fond */

à la ligne suivante

Arrière-plan : rgba(2, 127, 212, 0,3) ;

Comme vous pouvez le constater, la valeur de transparence de 0,3 est la même pour les deux méthodes.

Résultat de l'exemple RGBA :

La deuxième capture d'écran est bien meilleure que la première.

En jouant avec la translucidité du fond des blocs, vous pouvez obtenir des effets intéressants sur votre site internet. Il est important que ces blocs translucides soient placés sur un motif coloré, comme une photographie. Ce n'est que dans ce cas que l'effet sera perceptible. Cette technique a longtemps été utilisée dans le design, avant même l'avènement de tout CSS3, il a été implémenté uniquement dans des programmes graphiques.

Si le client exige que la mise en page soit correcte dans les anciennes versions du navigateur Internet Explorer, puis ajoutez la propriété filtre et n'oubliez pas de commenter pour que la validité du code ne soit pas affectée.

Conclusion

Format RVBA tout le monde soutient navigateurs modernes, à l'exception de Internet Explorer. Il est également très important que RVBA flexible, il n'agit que sur un élément spécifique spécifié, sans affecter ses enfants. Il est clair que cela est plus pratique pour le maquettiste. Mon choix se porte définitivement en faveur du format RVBA pour obtenir transparence en CSS.

Pour une meilleure consolidation du matériel et une plus grande clarté, je vous propose de passer par là.

Avec l'avènement de CSS3, le travail des concepteurs de mise en page est devenu à bien des égards plus simple et plus logique : après tout, vous pouvez désormais configurer de manière vraiment flexible n'importe quel objet, en recourant de moins en moins à JavaScript. Disons que vous devez ajuster la transparence de l'arrière-plan - CSS propose immédiatement plusieurs options.

L'arrière-plan est spécifié par un ensemble d'attributs, background-repeat, background-attachment, background-origin, background-clip, background-color), et chacun d'eux peut être spécifié séparément ou combiné sous l'attribut background. Examinons chacun d'eux plus en détail.

attribut de couleur d'arrière-plan

Même IE8 prend en charge cette méthode. Plusieurs images sont utilisées comme arrière-plan pour une mise en page flexible. L'essentiel est que lorsque vous utilisez une image, n'oubliez pas de spécifier également Couleur CSS arrière-plan, car les utilisateurs peuvent tout simplement ne pas charger l'image.

attribut de position d'arrière-plan

Si vous utilisez une image pour définir l'arrière-plan d'un bloc, CSS vous permettra de positionner l'image n'importe où sur l'écran. Par défaut, l'image est située à gauche coin supérieur. L'attribut accepte soit des indications verbales (haut, bas, gauche, droite) ou numériques (pourcentages, pixels et autres unités de mesure). Dans ce cas, vous devez spécifier deux valeurs : horizontalement et verticalement :

body (background-position: right center;) - dans cet exemple, l'arrière-plan sera situé sur le côté droit de la page et les distances entre le bas et le haut de l'image sont les mêmes.

attribut taille d'arrière-plan

Parfois requis avec en utilisant CSSétirer l'arrière-plan ou réduire sa taille. Pour ce faire, utilisez l'attribut background-size, et la taille de l'arrière-plan peut être définie soit en pixels, soit en pourcentages, ou dans toute autre unité de mesure.

Il y a quelques problèmes avec cet attribut : afin d'afficher correctement l'arrière-plan dans les versions antérieures des navigateurs, des préfixes doivent être utilisés. Certainement, versions actuelles prennent pleinement en charge cet attribut et le besoin de propriétés spécifiques a disparu.

attribut de pièce jointe d'arrière-plan

Cet attribut spécifie le comportement image de fond lors du défilement. Ainsi, il peut prendre 3 valeurs (sans tenir compte de l'héritage, qui est commun à tous les attributs présentés dans cet article) :

• fixé— rend l'image immobile sur l'arrière-plan ;
• faire défiler— l'arrière-plan défile avec d'autres éléments ;
• locale— l'image de fond défile si le contenu est défilant. L’arrière-plan qui s’étend au-delà du contenu est corrigé.

Exemple d'utilisation :

corps (fixation d'arrière-plan fixe).

Firefox ne prend actuellement pas en charge la dernière propriété (locale).

attribut d'origine d'arrière-plan

Cet attribut est responsable du positionnement de l'élément. Navigateurs versions précédentes nécessitent l’utilisation de préfixes. La propriété elle-même a trois paramètres :

• boîte de rembourrage positionne le fond par rapport au bord en tenant compte de l'épaisseur du cadre ;
• bordure-boîte diffère de la propriété précédente en ce que la ligne de bordure peut chevaucher complètement ou partiellement l'arrière-plan ;
• boîte de contenu Positionne l'image en la liant au contenu.

Si plusieurs valeurs sont spécifiées, les navigateurs peuvent réagir différemment : Firefox et Opera n'acceptent que la première option.

attribut de répétition d'arrière-plan

En règle générale, si l'arrière-plan est donné par une image, celle-ci doit être répétée horizontalement ou verticalement. C'est à cela que sert l'attribut background-repeat. Ainsi, l'arrière-plan d'un bloc dont le CSS contient une telle propriété peut avoir l'un de plusieurs paramètres :

• pas de répétition— l'image apparaît sur la page dans une seule version ;
• répéter— l'arrière-plan est répété le long des axes x et y ;
• répéter-x- uniquement horizontalement ;
• répéter- uniquement verticalement ;
• espace— le fond est répété, mais si l'espace ne peut pas être rempli, des vides apparaissent entre les images ;
• rond— l'image est mise à l'échelle s'il n'est pas possible de remplir toute la zone avec des images entières.

Exemple d'utilisation d'attribut :

corps (répétition d'arrière-plan : répétition sans répétition)- similaire répétition d'arrière-plan : répétition-y.

En CSS3, il est possible de définir des valeurs pour plusieurs images si vous listez les paramètres séparés par des virgules.

attribut background-clip

Cet attribut définit le comportement du fond sous les bordures (par exemple, dans le cas de bordures en pointillés) :

• boîte de rembourrage— l'arrière-plan est affiché strictement à l'intérieur du bloc ;
• bordure-boîte- l'image rentre dans le cadre ;
• boîte de contenu— l'image en arrière-plan apparaît uniquement à l'intérieur du contenu.

Exemple d'utilisation :

corps (clip d'arrière-plan : content-box ;).

Chrom et Safari nécessitent le préfixe -webkit-.

Attributs d'opacité et de filtre

L'attribut opacity vous permet de définir la transparence de l'arrière-plan - la propriété CSS fonctionnera dans tous les navigateurs. La valeur peut être définie entre 0,0 et 1,0 inclus. Avec cela, vous pouvez définir la transparence Arrière-plan CSS sans valeur entière : au lieu de 0,3 il suffit d'écrire.3 :

.block (image d'arrière-plan : url(img.png) ; opacité : .3 ;).

Pour définir la transparence de l'arrière-plan, dont le CSS fonctionnera même pour IE inférieur à la version 9, utilisez l'attribut filter :

.block (image d'arrière-plan : url(img.png); filtre : alpha(opacity=30);).

Dans ce cas, la valeur d'opacité est définie dans la plage de 0 à 100. Veuillez noter que l'attribut d'opacité diffère du réglage de la transparence à l'aide de RGBA par hérédité : lors de l'utilisation de l'opacité, non seulement l'arrière-plan devient transparent, mais également tous les éléments à l'intérieur du bloc. .

Surveillez toujours les statistiques d'utilisation du navigateur pour la CEI et tous les autres pays. Le plus un gros problème tous les maquettistes disposent d'anciennes versions d'IE, qui ne permettent pas l'utilisation complète de CSS3. Lors du codage, n'oubliez pas d'utiliser services spéciaux, qui vérifie si votre navigateur prend en charge Propriété CSS. Si vous ne pouvez pas installer d'anciennes versions de navigateurs, recherchez un service qui vérifiera le fonctionnement du site dans différents navigateurs en ligne.

Note 1 Note 2 Note 3 Note 4 Note 5

Détails Catégorie : web designer Auteur : SEO & WEB - KELL4

Création d'un fond transparent en HTML et CSS (effets d'opacité et RGBA)

Effet translucide l'élément est clairement visible sur image de fond et s'est répandu dans divers systèmes d'exploitation parce qu'il a l'air élégant et beau. L'essentiel est d'avoir non pas un motif monochromatique sous les blocs translucides, mais une image ; c'est dans ce cas que la transparence devient perceptible.

Cet effet est obtenu différentes façons, y compris des techniques anciennes telles que l'utilisation d'une image PNG comme arrière-plan, la création d'une image en damier et la propriété d'opacité. Mais dès que le besoin s'en fait sentir de le faire dans le bloc fond translucide, ces méthodes présentent des inconvénients désagréables.

Examinons la translucidité du texte et de l'arrière-plan - comment l'utiliser correctement dans la conception de sites Web :

La principale caractéristique de cette propriété est que la valeur de transparence affecte tous les éléments enfants qu'elle contient, pas seulement l'arrière-plan. Cela signifie que l'arrière-plan et le texte deviendront translucides. Vous pouvez augmenter le niveau de transparence en modifiant la commande d'opacité de 0,1 à 1.

HTML 5 CSS 3 IE 9

Dans la conception Web, une transparence partielle est également utilisée et est obtenue grâce au format de couleur RGBA, qui est défini uniquement pour l'arrière-plan de l'élément.

Généralement, dans une conception, seul l’arrière-plan d’un élément doit être translucide et le texte doit être opaque pour conserver la lisibilité. La propriété opacity ne convient pas ici car le texte à l'intérieur de l'élément sera également partiellement transparent. Mieux vaut utiliser Format RVBA, dont une partie est le canal alpha ou en d'autres termes la valeur de transparence. La valeur s'écrit rgba, puis les valeurs des composantes de couleur rouge, bleue et verte sont listées entre parenthèses, séparées par des virgules. Le dernier est la transparence, qui est définie entre 0 et 1, 0 signifiant transparence totale et 1 opacité des couleurs - la syntaxe d'utilisation de rgba.

Fond translucide HTML 5 CSS 3 IE 9

L'opacité de l'arrière-plan est définie sur 90 % - arrière-plan semi-transparent et texte opaque.

Bonjour, geeks du développement Web, ainsi que débutants. Pour ceux qui ne suivent pas les tendances informatiques, ou plutôt la mode web, je tiens à vous informer solennellement que cette publication porte sur le thème : « Comment faire bloc transparent CSS Tools" est fait pour vous. En effet, en 2016, l'introduction de divers objets transparents dans les services en ligne est considérée comme une démarche élégante.

Par conséquent, dans cet article, je vais vous parler de tout méthodes existantes créant de la transparence, en partant de solutions antédiluviennes, je me concentrerai sur la compatibilité des solutions avec les navigateurs, et donnerai également exemples spécifiques code de programme. Maintenant, mettons-nous au travail !

Méthode 1. Antédiluvien

Quand y avait-il encore ordinateurs faibles et les « capacités » ne sont pas développées, les développeurs ont trouvé leur propre façon de créer un arrière-plan transparent : en utilisant des pixels transparents à tour de rôle avec des pixels colorés. Le bloc ainsi créé ressemblait à un échiquier à l'échelle, mais à taille normale, il ressemblait à une sorte de transparence.

À mon avis, cette « béquille » est certainement utile dans les anciennes versions de navigateurs dans lesquelles les solutions modernes ne fonctionnent pas. Mais il convient de noter que la qualité d'affichage du texte , inscrit en tel, chute brusquement.

Méthode 2. Pas dérangé

Dans de rares cas, les développeurs résolvent le problème de l'introduction d'une image translucide en insérant... une image translucide toute prête ! À cette fin, des images enregistrées au format PNG-24 sont utilisées. Le format graphique vous permet de définir 256 niveaux de translucidité.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Cependant, cette méthode n’est pas pratique pour plusieurs raisons :

1. Internet Explorer 6 ne fonctionne pas avec cette technologie ; vous devez écrire un code de script pour celle-ci ;
2. Vous ne pouvez pas modifier les couleurs d'arrière-plan en CSS ;
3. Si la fonction d'affichage d'image du navigateur est désactivée, elle disparaîtra.

Méthode 3. Promu

Le plus courant et tout le monde méthode connue rendre un bloc transparent est une propriété opacité.

La valeur du paramètre varie dans la plage où à 0 l'objet est invisible et à 1 il est entièrement visible. Cependant, il y a aussi des moments désagréables ici.

Premièrement, tous les éléments enfants héritent de la transparence. Cela signifie que le texte saisi « transparaîtra » également avec l’arrière-plan.

Deuxièmement, Internet Explorer «montre à nouveau le nez» et, jusqu'à la version 8, ne fonctionne pas avec opacité.

Pour résoudre ce problème, utilisez filtre:alpha (Opacité=valeur).

Regardons un exemple.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Méthode 4. Moderne

Aujourd’hui, les professionnels utilisent l’outil rgba (r, g, b, a).

Avant cela, je vous ai dit que le RVB est l'un des modèles de couleurs, où R est responsable de toutes les nuances de rouge, G – les nuances de vert et B – les nuances de bleu.

Dans le cas du paramètre CSS, la variable A est responsable du canal alpha, qui à son tour est responsable de la transparence.

Principal avantage dernière méthode– le canal alpha n'affecte pas les objets situés à l'intérieur du bloc stylisé.

rgba(r, g, b, a) est pris en charge à partir de :

• Opéra version 10 ;
• Internet Explorer 9 ;
• Safari3.2 ;
• 3 versions de Firefox.

je veux noter fait intéressant! Le bien-aimé Internet Explorer 7 génère une erreur lors de la combinaison de propriétés Couleur de l'arrière plan avec le nom des couleurs (couleur de fond : or). Par conséquent, vous ne devez utiliser que :

couleur d'arrière-plan : rgba (255, 215, 0, 0,15)

Et maintenant un exemple.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Dans notre magasin, vous trouverez toutes sortes de fleurs.

Notez que le contenu textuel du bloc est entièrement visible (100% noir), tandis que l'arrière-plan est réglé sur un canal alpha de 0,88, soit 88%.