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..

    How can I put an input element on the same line as its label?

    How can I hide the backface of a block element rotated with transform: rotateX()?

    How do I absolutely position a relatively positioned element?

    HTML/CSS — How to add a selected state

    How can I make this section of my webpage responsive? [closed]

    How to make text flow from left right bootstrap

    How can I flip multiple div at same time?

    How to declare JavaScript and CSS XHTML-compatible?

    How to create a static footer in CSS?

    Showing required fields by bolding

    How to serve different size SVG graphic in css background image?

    How can I center a div within another div?

    How to set a dynamic CSS value with JavaScript

    How to get block to change width if text is longer then the width in a multilevel listless drop down navigation menu

    How to get right sidebar up on main content on resize of flexible with page?

    How to change the opacity background color of other two buttons once we click on a single button using css

    How can I completely cancel a class when a CSS media style is used?

    How to get anchor tag on background image of div?

    CSS How to add a button below an image [closed]

    How to fit two divs side by side horizontally?

    How to fix Image on top of text with css

    How to fix bottom of layout of 100% height (jQuery Mobile and Google Map)?

    How to change Bootstrap-select's placeholder color

    Problems with properly simulate a border to a “ribbon” with css. How do I correct it?

    How to remove a html table particular column to make other datas visible(responsive) using media queries?

    How to make a horizontal scroll when minifying window?

    How to align contents in different containers using only css

    How to align text next to a div?

    CSS - how to make image container width fixed and height auto stretched

    How to overlap auto-scaling images with an auto-scaling background