Changement de Bootstrap de la barre de navigation de l'opacité, sans affecter les boutons

Je ne veux que ma barre de navigation boutons pour être visible, tandis que la barre qui s'étend sur la totalité de la page a une opacité totale. Chaque fois que je change l'opacité de la barre de navigation, il affecte les classes à l'intérieur d'elle, même quand je spécifier ces classes n'ont aucune opacité.

J'ai posté une image de ce que j'essaie de reproduire. Comme vous pouvez le voir, les liens s'affichent en entier, mais la barre de navigation est invisible, permettant à la complète image de fond à afficher. Il pourrait ressembler à un solide barre rouge, mais je vous assure que c'est un invisible navbar.

Toute aide serait super apprécié! Merci.

Voici ma barre de navigation de code HTML:

<div class="custom_nav">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </a>
                <a class="brand" href="index.html">Homegrown</a>
            <div class="nav-collapse">
                <ul class="nav nav-pills">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="index.html">About</a></li>
                    <li><a href="index.html">Contact</a></li>
                </ul><!-- /.nav -->
            </div><!--/.nav-collapse -->
            </div><!-- /.container -->
        </div><!-- /.navbar-inner -->
    </div><!-- /.navbar -->
</div><!--/.custom_nav-->

Jusqu'à présent, j'ai essayé d'éditer mon CSS avec les éléments suivants:

ul .nav .nav-pills {background:rgba(255,255,255,0.5)}

.custom_nav {
    .navbar.navbar-fixed-top {
        background:rgba(255,255,255,.5);
    }
    .navbar .nav > .active a, .navbar .nav > .active a:hover, .navbar .nav > li a:hover {
        background:rgba(210,105,30, 0); text-shadow:none;
    }   
}

Votre question n'est pas très clair. Demandez-vous comment faire pour modifier l'opacité de la mère sans modifier l'opacité des enfants? Vous pouvez utiliser rgba pour la couleur d'arrière-plan (au lieu de l'opacité) si c'est ce que vous allez pour. Je suggère de poster un violon qui démontre votre problème.
La propriété opacité est propagé à ses enfants. Une façon de résoudre ce problème est d'utiliser le mécanisme est expliqué dans impressivewebs.com/demo-files/css-opacity
Je suis d'essayer de faire ce que le lien dans le commentaire en dessous de la vôtre décrit, mais avec la barre de navigation étant le parent et les boutons sont de la classe des enfants.

OriginalL'auteur Brian | 2013-01-24

15

Une solution consiste à utiliser rbga donnée ici. Il ne fonctionne pas dans ie < 9,
```
.custom_nav .navbar.navbar-fixed-top .navbar-inner{
    background: rgba(255, 255, 255, 0.3);
}
```
Violon

J'ai fait quelques modifications à mon post pour montrer comment je l'ai réglé et ce que je fatigué.
La Solution de mise à jour

OriginalL'auteur Arun P Johny
1

Pour modifier l'opacité de la mère sans modifier l'opacité des enfants, l'utilisation rgba sur le fond de la propriété, comme ceci:
```
ul {
  background: rgba(255, 255, 255, 0.7);
}
```
Les 3 premières valeurs sont les valeurs RVB des pixels qui composent la couleur, et la dernière valeur est l'opacité de la couleur (dans l'exemple ci-dessus, l'opacité est de 70%).

Voir DÉMO.

J'ai fait quelques modifications à mon post pour montrer comment je l'ai mis en place et ce que j'ai essayé.

OriginalL'auteur zakangelle

J'ai dû écrire un mixin avec stylu:

support-for-ie ?= true

opacity(n)
  opacity n
  -moz-opacity n
  filter unquote('alpha(opacity=' + round(n * 100) + ')')
  if support-for-ie
    filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')

.opacity-70
  opacity(0.7)

J'espère que cela peut aider quelqu'un qui veut un peu d'opacité avec l'appui de presque tous les navigateurs
pense

OriginalL'auteur jiahut

Vous devez vous connecter pour publier un commentaire.