How do I make a div transparent on a white body background?

Question

The background-color of my body is #ffffff. And I have a div that I need is colored but it needs to be transparent or see through. Is it possible to do this using CSS3 or do I have to use images to achieve this?

body {
background-color: #ffffff;
}
.box {
background-color: #999999;
    background-image: linear-gradient(to top, #999999 0%, #444444 100%) !important;
opacity: 0.7;
}

Update:

If you go here: http://pinesframework.org/pnotify/#demos-simple and look for the demo for Transparent Success you can see how the pop-up looks see through on a white background. I need to do something like that without using an image as they are using one.

you would use CSS3 if you want it animated to transparent...I'm confused as to what you want? — Ryan Saxe, May 08 '13 at 15:54
@ryansaxe the div doesn't appear transparent because the background is white. If the background color is different it would look better. So I am confused as to how to approach this.. — starbucks, May 08 '13 at 15:55
So didn't you just answer your own question? What are you trying to achieve? — woz, May 08 '13 at 16:06
If you go here: http://pinesframework.org/pnotify/#demos-simple and look for the demo for Transparent Success you can see how the pop-up looks see through on a white background. I need to do something like that without using an image as they are using one. — starbucks, May 08 '13 at 16:10
possible duplicate of [CSS - Opaque text on low opacity div?](http://stackoverflow.com/questions/2401953/css-opaque-text-on-low-opacity-div) — woz, May 08 '13 at 16:20

score 3 · Answer 1 · answered May 08 '13 at 16:09

It sounds like you want an alpha transparent background color. If that's the case, you can use RGBA colors, rather than a solid hex value and an opacity property. This way, only the background will have transparency, not the content.

In your case it would be:

.box {
    background-color: rgba(255,0,0,0.7);    
}

You can also specify a fallback color to browsers that don't support RGBA (IE 8 and older), or create a PNG image with the color fill you want. My vote is toward progressive enhancement, and just specify an alternate color for browsers that don't understand RGBA:

.box {
    background-color: #ff4c4c;
    background-color: rgba(255,0,0,0.7);    
}

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

UPDATED: Per your comment below, this question appears to be a duplicate of CSS - Opaque text on low opacity div?.

You need to change the opacity of the background instead of the element:

.box {
    rgba(255,0,0,0.6);
}

Or, since you are using a gradient, I would use this:

Ultimate CSS Gradient Generator

It will allow you to do semi-transparent backgrounds with a gradient.

edited May 23 '17 at 12:13

Community

1
1

answered May 08 '13 at 15:56

woz

10,888
3
34
64

Thanks. But it also shouldn't apply to the text. If you go here: http://pinesframework.org/pnotify/#demos-simple and look at the demo for Transparent Success you can see what I am trying to do. I want the similar transparent image that looks transparent on a white background. – starbucks May 08 '13 at 16:09

How do I make a div transparent on a white body background?

2 Answers2