'CSS Semi-Transparent box

I want a semi transparent div for better readability of the site's content, over my background image. The div has rounded corners, and I am having trouble combining that with transparency

How can I do this with CSS?

htmlcssweb


Solution 1:[1]

You could just update your css and fixes you errors : 

.TextBOx{
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
  border-radius:30px;
  border: #solid 10px #000;
  background-color: rgba(105,100,100,0.8);
  width:80%;
  margin-left: auto ;
  margin-right: auto ;
}

Goed so ?

Solution 2:[2]

Cross-browser opacity:

-ms-filter: "alpha(opacity=75)"; /* IE8 */
filter: alpha(opacity=75); /* Old IE */
-khtml-opacity: 0.75; /* Old Safari */
-moz-opacity: 0.75; /* Old Firefox, Netscape */
opacity: 0.75; /* Standard */

A tool to build it for you: https://www.alphachannelgroup.com/resources/tools/css-cross-browser-opacity-tool/

Solution 3:[3]

You can use opacity:0.5; to make the object half transparent. Form 0 to 1 (100%). But that will make the children transparent also. So you may Better use a transparent background-Color. Like this: background-Color:rgba(255,255,255,0.5); for a half transparent white Background.

Solution 4:[4]

you can use this CSS code for making transparent.

.transparent {
    zoom: 1; /*to fix the has layout bug in IE older version*/
    filter: alpha(opacity=50);
    opacity: 0.5;
}

Here is the Demo link http://jsbin.com/kibiruva/1/edit

Solution 5:[5]

You could use opacity or rgba() to define your background color.

Opacity x-browser example:

-ms-filter: "alpha(opacity=50)"; /* IE8 */
filter: alpha(opacity=50); /* Old IE */
-khtml-opacity: 0.50; /* Old Safari */
-moz-opacity: 0.50; /* Old Firefox, Netscape */
opacity: 0.50; /* Standard */

RGBA Example:

background-Color:rgba(255,255,255,0.5);
*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF); /*Old IE*/

Solution 6:[6]

Try opacity:

div.semiTrans{
    opacity: 0.8;
}

For old IE, you will also need filter:alpha(opacity=80).

Quir}{smode is a good reference.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 G-Cyrillus
Solution 2 random_user_name
Solution 3 Nico O
Solution 4 Kheema Pandey
Solution 5 Donnie Rock
Solution 6

Related Questions