La description
Spécifie le niveau de transparence d'un élément de page Web. Avec une transparence partielle ou totale, l'image d'arrière-plan ou d'autres éléments sous l'objet translucide apparaissent à travers l'élément.
Syntaxe
opacité : valeur
Valeurs
La valeur est un nombre de la plage . Une valeur de 0 correspond à la transparence totale de l'élément, et 1, au contraire, à son opacité. Des nombres fractionnaires comme 0,6 définissent la translucidité. Il est permis d'écrire des nombres sans zéro de tête, comme l'opacité : .6 .
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Résultat cet exemple illustré à la fig. une.
Riz. 1. Le résultat de l'utilisation de l'opacité
Navigateurs
Firefox antérieur à la version 3.5 prend en charge la propriété non standard -moz-opacity .
Internet Explorer avant que la version 9.0 n'utilise des filtres pour changer la transparence, pour ce navigateur vous devriez écrire filter : alpha(opacity=50) , où le paramètre opacity peut prendre une valeur de 0 à 100.
La propriété CSS opacity est responsable de la transparence des éléments (images, texte, blocs) en html.
Syntaxe CSS
opacité : valeur ;
Où la valeur peut prendre des valeurs réelles comprises entre 0,0 et 1,0. Une valeur de 1,0 signifie aucune transparence (par défaut).
Exemples : comme la transparence en html
Exemple 1. image transparente en html
La première image est rendue sans transparence, la seconde avec une transparence de 0,5.
Пример №2. Эффекты с прозрачностью в html
По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.
На странице преобразуется в следующее
Пример №3. Прозрачный блок на изображении в html
Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.
На странице преобразуется в следующее
Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
Для обращения к opacity из JavaScript нужно писать следующую конструкцию:
object.style.opacity ="VALUE "
Для создания эффекта прозрачности в CSS используется свойство opacity .
Браузер IE8 и более ранние его версии поддерживают альтернативное свойство - filter:alpha(opacity=x) , где " x " может принимать значение от 0 до 100 , чем меньше значение, тем прозрачнее будет элемент.
Все остальные браузеры поддерживают стандартное CSS свойство opacity , которое может принимать в качестве значения числа от 0.0 до 1.0 , чем меньше значение, тем прозрачнее будет элемент:
Essayer "Survoler la transparence
Pseudo-classe :hover permet de changer apparenceéléments lorsque vous les survolez avec le curseur de la souris. Nous allons utiliser cette fonctionnalité pour que l'image perde sa transparence au survol :
Essayer "Transparence de fond
Il y en a deux les voies possibles rendre l'élément transparent : la propriété opacity décrite ci-dessus, et en spécifiant la couleur de fond au format RGBA.
Vous connaissez peut-être déjà le modèle de représentation des couleurs dans Format RVB. RVB (Rouge, Vert, Bleu - rouge, vert, bleu) - un système de couleurs qui détermine la teinte en mélangeant le rouge, le vert et le bleu. Par exemple, pour définir la couleur du texte sur jaune, vous pouvez utiliser l'une des déclarations suivantes :
Couleur : RVB (255 255,0) ; couleur : RVB (100 %, 100 %, 0) ;
Les couleurs spécifiées avec RVB seront différentes de valeurs hexadécimales, que nous avons utilisés jusqu'à présent dans la mesure où ils nous permettent d'utiliser le canal alpha de transparence. Cela signifie que ce qui est en dessous apparaîtra à travers l'arrière-plan d'un élément avec une transparence alpha.
La déclaration de couleur RGBA est similaire dans sa syntaxe aux règles RGB standard. Cependant, entre autres choses, nous devons déclarer la valeur comme RGBA (au lieu de RGB) et définir une valeur de transparence décimale supplémentaire après la valeur de couleur entre 0,0 (entièrement transparent) et 1 (entièrement opaque).
Couleur : RVB (255 255, 0, 0,5) ; couleur : RVB (100 %, 100 %, 0, 0,5) ;
La différence entre la propriété opacity et RGBA est que la propriété opacity applique la transparence à l'élément entier, c'est-à-dire que tout le contenu de l'élément devient transparent. Et RGBA vous permet de définir la transparence pour des parties individuelles d'un élément (par exemple, uniquement du texte ou de l'arrière-plan) :
Corps ( image d'arrière-plan : url(img.jpg); ) .prim1 ( largeur : 400 pixels ; marge : 30 pixels 50 pixels ; couleur d'arrière-plan : #ffffff ; bordure : 1 pixel noir uni ; poids de la police : gras ; opacité : 0,5 ; filtre : alpha(opacity=70); /*for IE8 et versions antérieures*/ text-align: center; ) .prim2 ( width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid noir ; épaisseur de la police : gras ; alignement du texte : centré ; ) Essayez »
Remarque : les valeurs RGBA ne sont pas prises en charge dans IE8 et supérieur premières versions. Pour déclarer une couleur de repli pour les anciens navigateurs qui ne prennent pas en charge les valeurs de couleur avec des canaux alpha, spécifiez-la avant la valeur RGBA : background : rgb(255,255,0) ; arrière-plan : rgba(255,255,0,0.5) ;
La transparence en CSS est une technique assez à la mode ces derniers temps, ce qui entraîne des difficultés dans la mise en œuvre entre navigateurs. N'existe toujours pas méthode universelle, ce qui permettrait la transparence pour tous les navigateurs. Cependant, la situation s'est nettement améliorée ces dernières années.
Cet article détaille les approches existantes et fournit des exemples de code et des explications pour vous aider à obtenir le même résultat dans tous les navigateurs avec un minimum d'effort.
Un autre point qui mérite d'être mentionné est que bien que la transparence existe depuis quelques années maintenant, elle n'a jamais fait partie de la norme CSS. Il s'agit d'une propriété non standard qui devrait faire partie de la spécification CSS3.
ancienne approche
Dans l'ancien versions de Firefox et Safari doit appliquer la propriété comme ceci :
#monélément ( -khtml-opacity : 0,5 ; -moz-opacity : 0,5 ; )
La propriété -khtml-opacity était utilisée dans les anciennes versions des navigateurs webkit. Cette propriété est obsolète et n'est plus nécessaire, sauf si vous êtes certain qu'une partie importante du trafic de votre site provient de visiteurs utilisant Safari 1.x, ce qui est bien sûr peu probable.
La ligne suivante utilise la propriété -moz-opacity, qui fonctionnait sur les toutes premières versions du moteur Mozilla. Firefox a cessé de le prendre en charge dans la version 0.9.
Transparence CSS dans Firefox, Safari, Chrome et Opera
Pour la plupart des navigateurs modernes, il suffit d'utiliser la propriété suivante :
#monElement ( opacité : .7; )
Dans l'exemple ci-dessus, l'élément est défini sur 70 % d'opacité (30 % de transparence). Autrement dit, si nous définissons la valeur sur un, l'élément sera opaque et, par conséquent, définir cette valeur sur zéro le rendra invisible.
La propriété opacity gère 2 chiffres décimaux. C'est-à-dire que la valeur ".01" sera différente de la valeur ".02", bien que cela soit à peine perceptible.
Transparence CSS pour Internet Explorer
Comme d'habitude, Internet Explorer n'est pas compatible avec les autres navigateurs. De plus, nous avons maintenant trois versions de ce navigateur assez largement utilisées, dont le réglage de la transparence dans chacune est différent et nécessite parfois des efforts supplémentaires pour obtenir un résultat positif.
#monÉlément ( filtre : alpha(opacité=40); )
Cet exemple utilise la propriété filter, qui fonctionne dans les versions 6 à 8, mais il existe une limitation pour les versions 6 et 7 : la propriété hasLayout de l'élément doit être définie sur true . Cette propriété n'est présente qu'en IE et vous pouvez en lire plus, par exemple, sur Habré.
Une autre façon de définir la transparence à l'aide de CSS dans IE8 consiste à utiliser l'approche suivante (notez les commentaires) :
#myElement ( filtre : progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* fonctionne dans IE6, IE7 et IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * IE8 uniquement */ )
La première ligne fonctionnera dans toutes les versions actuellement utilisées, la seconde - uniquement dans IE8. Notez que la deuxième ligne utilise le préfixe -ms- et que la valeur est entre guillemets.
Définition et modification de la transparence CSS avec JavaScript ou jQuery
Vous pouvez utiliser le code suivant pour définir la transparence :
Document.getElementById("myElement").style.opacity = ".4" ; // pour la plupart des navigateurs document.getElementById("myElement").style.filter = "alpha(opacity=40)" ; // pour Internet Explorer
Bien sûr, dans ce cas, il est beaucoup plus facile d'utiliser jQuery, et cela fonctionnera également dans tous les navigateurs :
$("#myElement").css(( opacité : .4 )); // fonctionne dans tous les navigateurs
Vous pouvez animer cette propriété :
$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Animation terminée ; ce code fonctionne dans tous les navigateurs. ));
Fonction RVBA
CSS3 prévoit de prendre en charge le canal alpha avec la fonction rgba. Cette fonctionnalité fonctionne dans Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Il s'utilise comme ceci :
#rgba ( arrière-plan : rgba(98, 135, 167, .4); )
Dans ce cas, le dernier paramètre indique le niveau d'opacité.
Fonction HSLA
Comme la fonction précédente, CSS3 permet également de définir une couleur translucide à l'aide de la fonction HSLA, dont les paramètres signifient Hue (Hue), Saturation (Saturation), Brightness (Lightness) et Alpha channel (Alpha).
#hsla ( arrière-plan : hsla(207, 38 %, 47 %, 0,4); )
Un point important lors de l'utilisation des fonctions rgba et hsla est que le paramètre de transparence ne s'applique pas aux éléments enfants, tandis que l'utilisation de la propriété opacity est héritée.
La propriété CSS opacity est responsable de la transparence des éléments (images, texte, blocs) en html.
Syntaxe CSS
Où la valeur peut prendre des valeurs réelles comprises entre 0,0 et 1,0. Une valeur de 1,0 signifie aucune transparence (par défaut).
Exemple 1. image transparente en html
La première image est rendue sans transparence, la seconde avec une transparence de 0,5.
Translucidité de l'élément
Rendre l'image translucide au survol !
DémoTélécharger les sourcesMerci pour votre attention!
Article suivant
Comment créer une div scrollable ?
