Je veux faire disparaître l'arrière-plan du menu de la liste en utilisant l'opacité, sans affecter la police. Est-ce possible avec CSS3?
Réponses:
maintenant vous pouvez utiliser rgba dans les propriétés CSS comme ceci:
.class {
background: rgba(0,0,0,0.5);
}
0.5 est la transparence , changez les valeurs en fonction de votre conception.
Démo en direct http://jsfiddle.net/EeAaB/
plus d'infos http://css-tricks.com/rgba-browser-support/
rgba('black', 0.5)
?
oui, c'est possible. utilisez simplement la syntaxe rgba pour votre couleur d'arrière-plan.
.menue{
background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}
Voici un exemple de classe utilisant des couleurs nommées CSS:
.semi-transparent {
background: yellow;
opacity: 0.25;
}
Cela ajoute un arrière-plan à 25% opaque (coloré) et à 75% transparent.
CAVEAT
Malheureusement, l'opacité affectera tout l' élément auquel elle est attachée.
Donc, si vous avez du texte dans cet élément, il définira également le texte à 25% d'opacité. :-(
Pour contourner ce problème, utilisez les méthodes rgba
ou hsla
pour indiquer la transparence dans le cadre de la "couleur" d'arrière-plan souhaitée. Cela vous permet de spécifier la transparence de l'arrière-plan, indépendamment de la transparence des autres éléments de votre élément.
Voici 3 façons de définir un fond bleu à 75% de transparence, sans affecter les autres éléments:
background: rgba(0%, 0%, 100%, 0.75)
background: rgba(0, 0, 255, 0.75)
background: hsla(240, 100%, 50%, 0.75)
Dans ce cas, background-color:rgba(0,0,0,0.5);
c'est le meilleur moyen. Par exemple:background-color:rgba(0,0,0,opacity option);
Pour y parvenir, vous devez modifier le background-color
de l'élément.
Façons de créer une couleur (semi) transparente:
Le nom de la couleur CSS transparent
crée une couleur complètement transparente.
Usage:
.transparent{
background-color: transparent;
}
Utilisation des fonctions rgba
ou de hsla
couleur, qui vous permettent d'ajouter le canal alpha (opacité) aux fonctions rgb
et hsl
. Leurs valeurs alpha vont de 0 à 1.
Usage:
.semi-transparent-yellow{
background-color: rgba(255, 255, 0, 0.5);
}
.transparent{
background-color: hsla(0, 0%, 0%, 0);
}
Outre les solutions déjà mentionnées, vous pouvez également utiliser le format HEX avec valeur alpha ( #RRGGBBAA
ou #RGBA
notation ).
C'est assez nouveau (contenu par CSS Color Module Level 4), mais déjà implémenté dans des navigateurs plus grands (désolé, pas d'IE).
Cela diffère des autres solutions, car cela traite également le canal alpha (opacité) comme une valeur hexadécimale, ce qui le rend compris entre 0 et 255 ( FF
).
Usage:
.semi-transparent-yellow{
background-color: #FFFF0080;
}
.transparent{
background-color: #0000;
}
Vous pouvez également les essayer:
transparent
:rgba()
:#RRGGBBAA
:Essaye ça:
opacity:0;
Pour IE8 et versions antérieures
filter:Alpha(opacity=0);
innerHTML =
(hé, au moins c'est mieux que les alertes et document.write
ils le faisaient en 2012, mais toujours pas de manipulation DOM, en dehors du tutoriel jQuery à l'exception du petit tutoriel où ils listent les méthodes pertinentes une par chapitre, et même alors c'est juste une sélection - et oui, ils listent document.write
). Leur tutoriel XHR utilise readyStateChange au lieu de onLoad (pris en charge depuis IE7). Oh et leur solution de contournement pour les fonctions en JSON? Stringify them to be eval'd later
Oui, vous pouvez simplement du texte brut comme
.someDive{
background:transparent
}