How to make text in transparent div opaque? [duplicate]


Tags: html,css,twitter-bootstrap-3

Problem :

This question already has an answer here:

<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">GemCode [img] </a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</nav>

This is my HTML for a fixed navigation bar.

.navbar-fixed-top {
    background-color: #ecf0f1;
    border-radius: 10px;
    font-family: Arial;
    opacity: 0.6;
    height: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

This is the CSS for the HTML above.

What I am trying to achieve is a transparent background with text that is completely opaque. I tried adding:

a. { 
    opacity: 1.0;
}

this did not work. I am using Bootstrap and I am unsure as to how to make the text opaque.



Solution :

The issue with your approach is that you're changing the opacity for the entire containing element—including its children.

Instead of changing the opacity of the containing element to affect its background opacity, try changing the alpha of its background color. This requires you to convert your color from hex to rgba format (tools are available online for doing so). Here is an example with a black background with an opacity of 50%:

.navbar-fixed-top {
    background-color: rgba(0,0,0,.5);
    ...
}

At this point, your immediate problem would be solved, but you could also change the opacity or alpha of the elements inside of your container and see the effects if you wanted:

.navbar-fixed-top a {
    color: rgba(0,0,0, .8);
}

    CSS Howto..

    CSS how to select nav and li tags but exclude specified class?

    How to add style to words (HTML/CSS)

    How to add the footer with social icons in bootstrap?

    How to use CSS to make images in multiple li of one ul align by bottom edge?

    How can I move this box in this HTML/CSS file?

    how to make observable a css class with knockout js

    How to achieve this layout with CSS and div?

    How can I call ajax, without “link_to” kind of helpers?

    How to achieve “background-image: cover” CSS effect for dynamic images?

    Chrome and Firefox render positioned layout with negative margin differently - how to prevent?

    how to make textarea looks like input[text] on form invalid

    How to disable CSS Class on particular DIV

    In jQuery, how do I animate the “max-height” CSS property?

    how can i center the text inside my css div circle

    How to do make CSS Toggle like this? [closed]

    How to set ul width in percent?

    how to apply css to a link within a particular div only?

    How to apply row virtualization for a table / list in HTML/CSS/JS? [closed]

    How to property adjust table?

    How can i apply and/or remove a CSS class upon user selection on Radiobuttons with JQuery?

    How to programmatically add JS and CSS resources to ?

    How to put logo on navigation bar

    How to center HTML content

    How to spin and rotate in css?

    How can I change color of visited cgridview row?

    how to stop css hover out with a conditional

    How can I stop my cursor changing to a vertical arrow over text?

    How to get this simple layout done with CSS?

    How to keep footer at bottom of screen using jQuery

    How do I make the mobile view of my website not show certain elements?