Home/ Questions/Q 8368799
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T13:28:27+00:00

I have a div with CSS properties like so: div.header { opacity:0.4; filter:alpha(opacity=40); background:#000;

  • 0

I have a div with CSS properties like so:

div.header {
    opacity:0.4;
    filter:alpha(opacity=40);
    background:#000;
    width:300px;
    height:300px;
}

The problem is the content that is inside this div also has the same transparency. How can I only have the background color/div show the transparency without affecting the content inside that div?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use rgba on your background:

    div.header {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);

    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.4);

    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);

    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)";
}

    The color for IE is calculated by formula:

    Math.floor(0.4 * 255).toString(16); // 0.4 is your desired opacity

    it gives you 66 so that becomes the first 2 digits of the color.

    Source

    • 0