Couleur d'arrière-plan CSS transparente


Réponses:


116

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/


Merci. mais je veux faire apparaître la flèche par défaut dans le menu de la liste sans affecter la police
Saranya

1
existe-t-il un moyen d'écrire ceci plus court, comme rgba('black', 0.5)?
phil294

43

Gardez ces trois options à l'esprit (vous voulez # 3):

1) L'élément entier est transparent:

visibility: hidden;

2) L'élément entier est quelque peu transparent:

opacity: 0.0 - 1.0;

3) Seul l' arrière - plan de l'élément est transparent:

background-color: transparent;

14

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
}

2
Salut! Savez-vous quelque chose sur la définition CSS 'background-color' avec un canal aplha, mais en utilisant la valeur #HEX pour la couleur?
Piotr Stępniewski

@ PiotrStępniewski Probablement en retard, mais maintenant il y a une telle syntaxe (voir ma réponse )
FZs

10

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 rgbaou hslapour 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)

8

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);


6

Pour y parvenir, vous devez modifier le background-colorde l'élément.

Façons de créer une couleur (semi) transparente:

  • Le nom de la couleur CSS transparentcrée une couleur complètement transparente.

    Usage:

      .transparent{
        background-color: transparent;
      }
    
  • Utilisation des fonctions rgbaou de hslacouleur, qui vous permettent d'ajouter le canal alpha (opacité) aux fonctions rgbet 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 ( #RRGGBBAAou #RGBAnotation ).

    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:


5

Essaye ça:

opacity:0;

Pour IE8 et versions antérieures

filter:Alpha(opacity=0); 

Démo d'opacité de W3Schools


6
Le site auquel vous créez un lien ... c'est terrible.
John Dvorak

1
@TheWandererr Je vais commencer par la page liée. Gardez à l'esprit qu'il est censé démontrer un code exemplaire. Et pourtant ... Il n'y a pas d'indentation. Notez qu'ils utilisent le doctype HTML5, ce qui signifie qu'ils ont mis à jour la page après qu'elle a été liée ici, ou qu'ils ont utilisé HTML5 six mois avant même qu'il ne soit dans l'état de recommandation candidate. Suivant: Le CSS en ligne est mauvais, pour la mise en cache et pour la lisibilité. Ils doivent en quelque sorte l'utiliser ici car ils n'ont qu'un seul panneau pour la source de la page entière, mais s'ils ont utilisé plusieurs panneaux, comme le fait jsfiddle (2010). Et même pour une page démontrant l'opacité,
John Dvorak

1
@TheWandererr ils auraient pu faire mieux. En montrant l'effet sur les éléments imbriqués ou en autorisant une action de survol pour le désactiver, par exemple. Ensuite, il y a tout ce "prétendant être le consorcium w3, et quand vous êtes découvert, lancez un autre reskin ou deux, également étiqueté comme w3something" - un peu malhonnête si vous me demandez. Ils disent également que leurs exemples peuvent être «simplifiés pour la lisibilité» et «constamment révisés», mais la suppression des espaces n'aide pas la lisibilité et le support IE7 n'est pas non plus la nouvelle tendance. De plus, qui ne paierait pas 100 $ pour un morceau de papier qui nuit à leur crédibilité?
John Dvorak

1
@TheWandererr IIRC, ils avaient l'habitude d'avoir un aperçu du test. Les questions étaient un mélange de trivia et de trucs d'entrée de gamme. Ils peuvent avoir eu certaines des réponses légèrement incorrectes, aussi. Quant à la partie opacité de leur tutoriel CSS: trois en-têtes dédiés à la transparence des images - ils ne changent que le sélecteur CSS. Puis deux autres paragraphes - un pour introduire RGBA (finalement seul l'arrière-plan est transparent) et un comme "exemple d'intégration" (yay! Et pas d'indentation). Alors ... c'est tout. Il n'y a plus rien sur l'opacité. Et non, il n'y a pas non plus de sujet "d'opacité avancée" plus tard.
John Dvorak

1
@TheWandererr parlons de Javascript: Tous leurs exemples incluent: pas d'indentation (même en code Javascript); innerHTML =(hé, au moins c'est mieux que les alertes et document.writeils 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
John Dvorak

2

Oui, vous pouvez simplement du texte brut comme

.someDive{
    background:transparent 
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.