How to fix background Opacity css


Tags: jquery,html,css

Problem :

It is possible to implement the opacity only to the background and not to the text ?

Demo: http://jsfiddle.net/4Zbsd/

.box
{
background-color: #000;
opacity: 0.7;
filter: alpha(opacity=70);
color: #fff;
height: auto;
width: 232px;
margin: 5px 0px 0px 20px;
padding: 1px 0px 1px 15px;
border-radius: 15px;
border: solid 1px #000;
}


Solution :

Here you are - http://jsfiddle.net/4Zbsd/7/

On the background property use rgba color - "background: rgba(0, 0, 0, .7);"

 .box
    {
    background: rgba(0, 0, 0, .7);
    color: #fff;
    height: auto;
    width: 232px;
    margin: 5px 0px 0px 20px;
    padding: 1px 0px 1px 15px;
    border-radius: 15px;
    border: solid 1px #000;
    }

    CSS Howto..

    How to select the las Li with Xpath or Css Selector

    CSS - how to code for a specific resolution

    How can I stop an CSS animation from interfering with a CSS transform transition?

    How to stop a timeOut animation that contains multiple timeOut animations within

    How do I make an image semi-transparent?

    How do you measure the height of a HTML element scaled with CSS3 transform?

    how to overwrite button's non-hover state colour to grey, but when hover button show the colour (with css framework)

    How to make two buttons in column?

    How to make a full width sub-menu [closed]

    How can I ensure that my absolutely positioned div is tall enough to meet my sticky footer?

    How to centering a form

    How to keep floating labels floating after input. Pure CSS

    htmlAttributes: How do I add a CSS class rule for the below?

    CSS - How to set an elements height as a % of a container with auto height?

    Text is too close to scroller. How to create a little bit space between scroller and text?

    How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

    How do I style DIVs inside a checkbox label based on if it is checked or not?

    How can I center the nav menu items using bootstrap 3?

    How do I refresh the qtip label to display new label for specific button on hover?

    How to create a horizontal navigation in HTML/CSS above an image?

    How to Align all inputs in a Form

    How to find a unique identifier using CSS for a class

    How to hide Firefox context menu to show my own menu instead?

    How can a user add content to a website? [closed]

    How to test CSS selector performance?

    How to make image 3D using CSS

    Table: how to change pictures on mouseover on single rows?

    How to use css to style xhtml markup made only of divs like a table [closed]

    How to make Angular Forms ngModel classes inherit from Bootstrap Forms classes

    How to make div's inside div responsive