Transparent couleur de fond de CSS

Je veux faire le menu de la liste de disparaître en utilisant l'opacité, sans affecter de police. Est-il possible avec CSS3?

InformationsquelleAutor Saranya | 2012-06-25
  1. 97

    hé maintenant, vous pouvez utilisé rgba dans les propriétés css comme ceci 

    .class{
background:rgba(0,0,0,0.5);
}

    0,5 est transparence maintenant, vous pouvez changer selon votre conception .

    Démonstration en direct http://jsfiddle.net/EeAaB/

    plus d'infos http://css-tricks.com/rgba-browser-support/

    • Je vous remercie. mais je veux diappear la valeur par défaut flèche de menu de la liste sans affecter police
    • u peut montrer votre code dans jsfiddle.net que puis-je vous aider correctement..........
    • est-il un moyen d'écrire cette courte, comme rgba('black', 0.5)?
    InformationsquelleAutor Rohit Azad
  2. 35

    Garder ces trois options à l'esprit (ce que vous voulez #3):

    1) Tout élément est transparent:

    visibility: hidden;

    2) Ensemble de l'élément est un peu transparent:

    opacity: 0.0 - 1.0;

    3) le fond de l'élément est transparent:

    background-color: transparent;
    InformationsquelleAutor jordanb
  3. 12

    oui, c'est possible. utilisez simplement le rgba-syntaxe pour votre couleur d'arrière-plan.

    .menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}
    • Salut! Savez-vous quelque chose à propos de 'background-color' CSS définition avec aplha canal, mais en utilisant #valeur HEXADÉCIMALE de la couleur?
    InformationsquelleAutor oezi
  4. 8

    Dans ce cas background-color:rgba(0,0,0,0.5); est le meilleur moyen.
    Par exemple: background-color:rgba(0,0,0,opacity option);

    InformationsquelleAutor dasdasdasdasd
  5. 6

    Voici un exemple de classe à l'aide de CSS nommé couleurs:

    .semi-transparent {
  background: yellow;
  opacity: 0.25;
}

    Cela ajoute un arrière-plan qui est de 25% opaque (couleur) et 75% transparente.

    Mise en garde
    Malheureusement, l'opacité affectera ensuite ensemble élément auquel il est rattaché.

    Donc, si vous avez un texte dans cet élément, il va mettre le texte à 25% d'opacité trop. 🙁

    Dans la plupart des cas, vous auriez besoin d'utiliser rgba ou hsla les méthodes pour indiquer la transparence de fond, sans nuire à la transparence de tout dans votre élément.

    Voici 3 façons de définir un arrière-plan bleu à 75% de transparence:

    • background: rgba(0%, 0%, 100%, 0.75)
    • background: rgba(0, 0, 255, 0.75)
    • background: hsla(240, 100%, 50%, 0.75)
    InformationsquelleAutor SherylHohman
  6. 4

    Essayez ceci:

       opacity:0;

    Pour IE8 et plus tôt

    filter:Alpha(opacity=0);

    L'opacité de Démonstration de W3Schools

    • ouais..j'ai utilisé ce code pour disparaître de la direction par défaut dans la liste de menu.mais il aura une incidence sur la police trop..
    • Le site que vous créez un lien... c'est terrible.
    • pourquoi est-w3schools terrible?
    • Je vais commencer par la page liée. Gardez à l'esprit que c'est censé démontrer exemplaire du code. Et pourtant... Il n'y a pas d'indentation. Ne noter qu'ils utilisent le doctype HTML5, ce qui signifie qu'ils soit mis à jour la page après il a été établi un lien ici, ou ils ont utilisé HTML5 un an et demi avant, c'était encore dans le candidat à la recommandation de l'état. Prochaine: Inline CSS est mauvais, pour la mise en cache et pour des raisons de lisibilité. Ils ont un peu de l'utiliser ici car elles n'ont qu'un panneau pour l'ensemble de la source de la page, mais si ils ont utilisé de multiples panneaux, comme jsfiddle (2010) n'. Et même pour une page démontrant l'opacité,
    • ils auraient pu faire mieux. En montrant l'effet sur les éléments imbriqués ou en permettant à un passez à l'action pour le désactiver, pour une. Puis il y a l'ensemble de "faire semblant d'être le w3 consorcium, et lorsque vous avez trouvé le lancement d'une nouvelle reskin ou deux, également étiqueté comme w3something" chose - un peu malhonnête si vous me demandez. Ils disent aussi que leurs exemples peuvent être simplifié pour des raisons de lisibilité" et "constamment à l'examen", mais en enlevant les espaces ne facilite pas la lisibilité et IE7 soutien n'est pas exactement la nouvelle tendance soit. Aussi, qui ne voulait pas payer 100 $pour un morceau de papier qui nuit à leur crédibilité?
    • Autant que je me souvienne, ils ont l'habitude d'avoir un aperçu de l'essai. Les questions étaient un mélange de trivialité et d'entrée de trucs. Ils ont peut-être eu quelques réponses légèrement incorrect, trop. Comme pour l'opacité partie de leur tutoriel CSS: trois en-têtes dédié à la fabrication des images transparentes, ils ne font que changer le sélecteur CSS. Puis deux autres paragraphes un à introduire RGBA (enfin seulement le fond est transparent) et un autre comme un "exemple d'intégration" (yay!!! Aussi, pas d'indentation). Puis... c'est tout. Il n'y a rien de plus au sujet de l'opacité. Et non, il n'y a aucune avancée "opacité" sujet plus tard, soit.
    • parlons à propos de Javascript: Tous les exemples incluent: pas d'indentation (même dans le code Javascript); innerHTML = (bon, au moins c'est mieux que les alertes et les document.write ils ont l'habitude de faire en 2012, mais toujours pas de manipulation du DOM, en dehors de jQuery tutoriel, sauf pour les bits de tutoriel où ils énumèrent les méthodes pertinentes d'un par chapitre, et même alors, il est juste seletion - et oui, ils ne liste document.write). Leur XHR tutoriel utilise readyStateChange au lieu de onLoad (prise en charge depuis IE7). Oh, et leur solution de contournement pour les fonctions en JSON? Stringify à être eval ferais plus tard
    • Tout autre site que vous pourriez recommander?
    • pour le Javascript, le CSS et le HTML, Mozilla Developer Network est le de facto site de documentation. Pour jQuery, à la tête de son propre site web, jQuery.com. Pour PHP, si vous avez le code, c'est PHP.net. Comme un lieu de vider vos extraits de code HTML, il n'y a jsFiddle.net. Aussi, il est JSBin. StackOverflow a aussi son propre extrait de moteur peut être dans les questions et les réponses.

    InformationsquelleAutor Vinod