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 create a full screen div on landing page

    How to improve the rendering of my HTML/CSS button?

    How to apply CSS to HTML body element?

    How to stop all CSS overrides on a container DIV?

    How to create a white border circle having white exclamation mark inside a box having a yellow background in html/css?

    How do I change the color of Semantic UI icons?

    How to use custom css file for layout of a module in Yii2

    How can i set png icon collection with CSS?

    how to change css styles of custom jquery widget?

    How to override CSS Background that already has !important?

    showing a css component for a specified number of seconds

    How can I animate this?

    How to Mask Images with Dynamic Sizes to Shapes?

    How to change css property of the particular selection text in a input field using javascript

    How to place HTML elements over inline SVG

    How to use CSS transforms to translate product info into view

    How to set CSS class file to a Menu item control

    How to stack text with pure CSS?

    How to use HTML classes and ID's

    How Do I make this JQuery window have a minimum size?

    How to show overflowing text with animation?(Javascript - HTML - CSS)

    How to float menu list elements

    How to use preloaded CSS spritesheet in javascript?

    css - how to hide href link nested inside a div?

    How to scroll jQuery ui tabs?

    how to space 4 images equally within a div?

    How Do I Use Css To Select A Area Of Code

    how to enlarge an element and show text on clicking

    EXTREME beginner making a website from scratch, how do i center things, pictures, and zoom problems

    parse JSON to HTML table: How do I format the css of the table?