By Mistu4u


2012-08-04 08:57:45 8 Comments

I'm not using CSS3. So I can't use opacity or filter attributes. Without using these attributes how can I make the background-color transparent of a div? It should be kind of the text box example in this link. Here the text box background color is transparent. I want to make the same, but without using the above mentioned attributes.

6 comments

@ARVIND CHAUHAN 2019-11-12 06:35:21

    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */

@Saeed Zhiany 2019-11-12 06:56:19

Please provide some explanation for your answer and avoid posting code only answers.

@randominstanceOfLivingThing 2018-01-31 16:56:02

From https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

To set background color:

/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00;  /* Fully transparent */

/* Special keyword values */
background-color: transparent;

/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparent */

/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparent */

@Jerska 2012-08-04 08:59:48

The problem with opacity is that it will also affect the content, when often you do not want this to happen.

If you just want your element to be transparent, it's really as easy as :

background-color: transparent;

But if you want it to be in colors, you can use:

background-color: rgba(255, 0, 0, 0.4);

Or define a background image (1px by 1px) saved with the right alpha.
(To do so, use Gimp, Paint.Net or any other image software that allows you to do that.
Just create a new image, delete the background and put a semi-transparent color in it, then save it in png.)

As said by René, the best thing to do would be to mix both, with the rgba first and the 1px by 1px image as a fallback if the browser doesn't support alpha :

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

See also : http://www.w3schools.com/cssref/css_colors_legal.asp.

Demo : My JSFiddle

@René 2012-08-04 09:24:19

Also typed as comment at other answer. The nicest thing would be using rgba coloring and the described png in this answer as fallback.

@tfont 2015-11-18 10:39:45

Wickedness on the simplicity of using 'transparent' on the background-color attribute. Mega kudos!

@user3241848 2014-09-28 01:34:08

It might be a little late to the discussion but inevitably someone will stumble onto this post like I did. I found the answer I was looking for and thought I'd post my own take on it. The following JSfiddle includes how to layer .PNG's with transparency. Jerska's mention of the transparency attribute for the div's CSS was the solution: http://jsfiddle.net/jyef3fqr/

HTML:

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

CSS:

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

And my original inspiration:http://jsfiddle.net/5g1zwLe3/ I also used paint.net for creating the transparent PNG's, or rather the PNG's with transparent BG's.

@Paul Fleming 2012-08-04 09:03:22

Opacity gives you translucency or transparency. See an example Fiddle here.

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

Note: these are NOT CSS3 properties

See http://css-tricks.com/snippets/css/cross-browser-opacity/

@Jerska 2012-08-04 09:04:32

"So I can't use opacity or filter attributes"

@Pekka supports GoFundMonica 2012-08-04 09:05:16

@Jerska that is a premise that needs questioning though. His only reason not to use those attributes seems to be that his IDE is complaining about them

@Mistu4u 2012-08-04 09:06:32

So is there any other way to acheive that?

@Pekka supports GoFundMonica 2012-08-04 09:07:27

@Subir if you need another way, see Jerska's answer. But as said, it seems questionable why you want to avoid opacity in the first place.

@Mistu4u 2012-08-04 09:09:19

Like you rightly understood my IDE is not supporting them and one more word in the same link you shared please follow the NOTE in the top. It says The CSS opacity property is a part of the W3C CSS3 recommendation.

@Paul Fleming 2012-08-04 09:12:14

@SubirAdhikari. You are right that it is part of the CSS3 specification, but it has been available in most browsers for years. It works in none-CSS browsers. Don't get too hung up on CSS3.

@René 2012-08-04 09:19:22

Poster wanted an opaque background, not an opaque element. Text in the element will also be opaque using the opacity method. This answer is not complete enough to provide that. Using rgba with a fallback png would be much better.

@Adrien Be 2014-02-24 11:30:12

@Adrien Be 2014-02-24 11:32:24

@RenéGeuze: this technique uses opacity, hence is compatible with IE5+, Firefox, Chrome, & Safari stackoverflow.com/a/21984546/759452 . I really like the rgba technique but it does not work on IE8 & I am not not sure about IE9 either.

@user1147171 2013-12-26 06:12:52

transparent is the default for background-color

http://www.w3schools.com/cssref/pr_background-color.asp

@Dan Cron 2015-10-30 15:20:47

Yes. According to the MDN spec on backgorund-color, the initial value of backgorund-color is transparent, and it is not an inherited property. So, the default is transparent.

Related Questions

Sponsored Content

32 Answered Questions

[SOLVED] How to make a div 100% height of the browser window

  • 2009-10-15 21:18:43
  • mike
  • 1870604 View
  • 2023 Score
  • 32 Answer
  • Tags:   html css height

102 Answered Questions

[SOLVED] How to horizontally center a <div>

38 Answered Questions

[SOLVED] How can I make a div not larger than its contents?

  • 2009-01-16 16:03:07
  • George Snider
  • 1348975 View
  • 1969 Score
  • 38 Answer
  • Tags:   html css width

18 Answered Questions

[SOLVED] How do CSS triangles work?

28 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1513127 View
  • 2217 Score
  • 28 Answer
  • Tags:   html css opacity

35 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 916359 View
  • 1748 Score
  • 31 Answer
  • Tags:   html css html-table

18 Answered Questions

[SOLVED] How can I remove a style added with .css() function?

Sponsored Content