CODEWITHSUNDEEP
htmlcssweb
Rumanoid
Rumanoid

Reputation: 139

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?

Upvotes: 1

Views: 21774

Answers (5)

G-Cyrillus
G-Cyrillus

Reputation: 105903

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 ?

Upvotes: 9

Donnie Rock
Donnie Rock

Reputation: 525

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*/

Upvotes: 0

Kheema Pandey
Kheema Pandey

Reputation: 10265

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

Upvotes: 0

Nico O
Nico O

Reputation: 14102

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.

Upvotes: 0

random_user_name
random_user_name

Reputation: 26160

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/

Upvotes: 3

Related Questions