Apply opacity to an element in CSS - html

I have a div element named signup-box and I want to have an opacity value of 0.65 applied to it, But there appears to be a side affect to doing so. For some reason it is getting applied to everything within that div as well. For instance, my white text wont show up white and also the inputs aren't white. What can I do to keep the transparent effect without losing the design aspects I want to keep? http://jsfiddle.net/HKy3F/5/

This is the behavior of the opacity property (it applies to everything in that element). If you only want to apply the opacity to the background only, then you'll need to either create an image with a 65% transparent black box, or you can use the CSS3 colors RGBA function to generate the color black at 65% opacity (doesn't work with IE < 9).
background: rgba(0, 0, 0, 0.6);
Which produces this jdFiddle. Hope that's what you were looking for.

check this out , that should answer you question , use background rgba instead of opacity on your box.
http://jsfiddle.net/camus/Xb5TU/
#signup-box {
height: 330px;
width: 350px;
background-color: rgba(0,0,0,0.65);
border-radius: 8px;
}

An easy way would be to create a small png file with the transparency you need and set it as background of the parent element. This will be good for all browsers :)

Have you tried using 2 divs - one for the background and one for the content?
In my example, I have a the background color #ffffff at 65% opacity.
Here is the CSS:
body { background:#000000 ;
margin:auto ;
padding:15px ;
}
#divA { background:#ffffff ; /* this is your background */
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
/* IE 5-7 */
filter: alpha(opacity=65);
/* Netscape */
-moz-opacity: 0.65;
/* Safari 1.x */
-khtml-opacity: 0.65;
/* Good browsers */
opacity: 0.65;
display:block ;
width:300px ;
height:300px ;
margin:auto ;
z-index:1 ;
}
#divB { display:block ; /* this is where your content goes */
padding:20px ;
width:250px ;
height:260px ;
text-align:center ;
color:#C00 ;
font-family:Arial, Helvetica, sans-serif ;
font-size:24px ;
text-align:center ;
margin:auto ;
z-index:5000 ;
}
and here is the HTML that implements it:
‹div id="divA"›
‹div id="divB"›text goes here‹/div›
‹/div›
It works in IE7, IE8, IE9, FF, Opera, Safari, and Chrome
Good luck!
Cynthia

Related

Prevent IE8 from making content transparent

I have a div with its individual CSS for IE8, it is transparent. How can I prevent IE8 from making content inside this div also transparent? It should be 100% visible and not transparent. Thanks so much for suggestions.
Fiddle (to be watched at in IE8)
.mybox {
position: absolute;
top: 362px;
left: 0;
width: 460px;
height:94px;
overflow: hidden;
text-align: left;
padding-left: 10px;
padding-top: 3px;
overflow:hidden;
background-color:#000000;
/* background: transparent; */
-ms-filter: "alpha(opacity=60)";
/* zoom:1 ; */
/* -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; */
/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; */
/*filter: alpha(opacity=60);*/
}
OT: Ok I know this is kind of old school. But still my customer wants this page to be compatible with IE8.
Related resources:
2
3
4
Opacity in inherited to all children, by design. New browsers can use alpha-channel (RGBA) to get around this, IE8 cannot.
All you can really do is use absolute-positioning to place the content you want visible over-top of the transparent bits. You of course need to rearrange the element stacking order to do this.
You can cheat by making a copy of the contents, minus the transparent element, and placing it over top of the existing element using JS.
If the div has the class called .mybox then try and definitively set the opacity perhaps by adding opacity: 1;
Finally, I found an even better solution:
.mybox {
background:none transparent scroll repeat 0 0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#98000000,endColorStr=#98000000);
}
UPDATED: Take a look with IE8
I obviously messed up something with the filter declaration, I am sorry about that... :(

How can i make the opacity background in css?

I created the popup for the facebook when the popup load the entire background is goes to something like color code #ccc; which can i view the inside content also. How can do this in css here is the code that i tried .
#ptechsolfb {display:none;
background-color:#ccc transparent;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:999999999;
opacity: 1; }
How can i do this. Any One would be much appreciated.
The correct way to make only the background opaque would be to apply an rgba color:
background:rgba(204,204,204,0.5);
This is the equivalent of #ccc but semi-transparent because it has an alpha value of 0.5.
If you change the opacity value for the entire div its contents will also go semi-transparent, which is not the intended behaviour.
Background opacity is achieved using rgba. For instance, this would create a black background (#000 or rgb(0,0,0)) with 50% (0.5) opacity:
element {
background-color:rgba(0, 0, 0, 0.5);
}
JSFiddle example.
To give a background of #CCC (rgb(204, 204, 204)) 75% opacity, you'd use:
element {
background-color:rgba(204, 204, 204, 0.75)
}
For background transparency, you need an rgba color definition. This would look like this:
background-color:rgba(200, 200, 200, 0.5);
Where the first three numbers are the red, green and blue components, and the fourth number is an opacity percentage for the 'alpha channel'.
However, please note that this syntax isn't supported in IE8 or earlier. It does work in pretty much all other current browsers, but IE8 support may be a problem for you.
If you need to support IE8, my suggestion is to use CSS3Pie, which is a polyfill script that adds support for this feature (and a load of other stuff) to old IE versions.
Hope that helps.
try something like this:
.Background
{
background-color:white;
background: rgba(0, 0, 0, 0.5);
}
about the value for opacity:
"Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)"
Here is the link: http://www.w3schools.com/cssref/css3_pr_opacity.asp
AND it wont work like you wrote it:
background-color:#ccc transparent;
You have to remove the transparent atribute from background-color property:
background-color:#ccc;
If you want a (nearly) cross-browser solution, you can try:
.alpha60 {
/* 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.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Where for IE, the first Hex pair (99) controls the opacity.
Source here.

How to set the font background with opacity but not the text inside it

I want to use background-color of the body and to apply it to the font background but with opacity 0.1
So the html is something like this
<font class="addFav">Add to Fav {num of all favs}</font>
I get the body BGcolor let say #f7f7f7 and in the tag of the page is
.addFav{background-color:#f7f7f7;}
And in .css file i set the color to #333;
font.addFav{color:#333;}
I thought of useing two divs, but the problem is that the text inside the font is dinamic
Hi i am mentioning the property through which you can increase and decrease the opacity of background and that will not affect the text color its simple see the css basically you have to use the rgb color in background alpa for opacity.
background:rgba(146,146,146,0.1);
or see the example:-
http://jsfiddle.net/8LFLd/3/
.addFav
{
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0); /* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
opacity:0.6; /* this will work if your browser supports css3*/
}
Just use the CSS3 opacity property.
.addFav{background-color:#f7f7f7;opacity:0.1;}

CSS Opacity Property

Hi i am using CSS Opacity Property for a div tag and it works well but the problem is when I write some text or paste images on that div tag they also become fade. I just need div back color to be fade and not the div content. My code is ...
#fade div
{
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
width:750px;
height:150px;
background-color:#FFFFFF;
}
#text in fade div
{
font-weight:bold;
color:#8A2BE2;
}
Thankyou !!!
It's much easier to use rgba() or a transparent PNG for the background.
rgba(0, 0, 0, .1);
rgba(0, 0, 0); //fallback
You can use rgba() property for this:
write like this:
#fade div
{
background-color: rgba(0,0,0,0.1);
width:750px;
height:150px;
background-color:#FFFFFF;
}
For IE you can use IE filter
background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); /* IE6 & 7 */ zoom: 1;
You can generate your filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
Just use 1px semi transparent gif and repeat it by x and y. As far as I know it is the most easy way to set semi transparent background.
Ofcourse the opacity applies to the child elements as well.What you can do is to segragate your markup.
<div id='Div-With-Opacity-set'>
</div>
<div id='Child-Elements-for-the-above-div'>
</div>
Align your markup carefully such that the markup resembles what you want.
Why don't you reset the opacity then?
#text in fade div
{
font-weight:bold;
color:#8A2BE2;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
Your best bet without CSS3 is probably to create a div and put another div positioned on top of it, but not nested inside of it. Opacity filters down to ALL elements inside of the element with the opacity set.
If you put a div immediately to the right, and then gave it a margin of -750px;, you could give it an opacity of 1, but the div behind it could have an opacity of 0.1, and this would work fine.
With CSS3 you could do this:
#fade
{
width:750px;
height:150px;
background-color: rgba(255,255,255,0.1);
}
and just the background would be 0.1 opacity. The text would still be 1.
What I personally do most often though, is I create a small .png with the transparent background that I want, and then I set that .png as the background of an element. In photoshop I could set the opacity of the white background to 0.1, then save a 50X50 square, and then I've got nearly perfect transparency (no IE6).
something like http://jsfiddle.net/PWM5f/ you need

How to make a transparent background without background image?

I would like a div to have a transparent background.
I tried to do this using background-color and opacity, but the problem is that the border and the text inside become also transparent. Example here.
Is this possible to achieve this without using transparent PNG background image ?
If you just want the color of the background to be transparent and not the child content, use
background-color: rgba(0,0,0,.5); // Sets to 50% transparent
See this page for more details - it's a css3 spec so won't show up in every browser:
http://www.css3.info/introduction-opacity-rgba/
Yes.
Set
background-color: transparent;
and do not use opacity, as that is what makes semi-transparent the whole div..
updated your example at http://jsfiddle.net/eU7By/1/
UPDATE after comments
you can use rgba for the background-color as #DHuntrods mentions. IE needs some tweaking of'course.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/
The most cross-browser solution is to use the opacity property on an additional "absolutely positioned" child element (in a relatively or absolutely positioned parent): it only there to contain the colored transparent background.
Then you can use the opacity property to make this element transparent. Since this element has no children, the opacity will not affect any other element.
Opacity is an IE5+ property, just use (see http://css-tricks.com/snippets/css/cross-browser-opacity/):
-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 */
see the jsFiddle example http://jsfiddle.net/DUjzX/1/
The whole code looks like:
The HTML:
<div class="my-cool-wrapper">
<div class="text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
<div class="transparent-background">
</div>
</div>
The CSS:
.my-cool-wrapper {
position: relative;
}
.my-cool-wrapper .text-and-images-on-top {
padding: 10px 15px 19px 15px;
z-index: 1;
position: relative; /* needed to enable the z-index */
}
.my-cool-wrapper .transparent-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; /* IE 8 */
filter: alpha(opacity=10); /* IE 5-7 */
-moz-opacity: 0.1; /* Netscape */
-khtml-opacity: 0.1; /* Safari 1.x */
opacity: 0.1; /* Good browsers */
background-color: blue;
}
read more:
Set opacity of background image without affecting child elements
Screenshots proofs
ps: I did not add the screenshots for Chrome, Firefox & Safari since these are much "better" browsers... trust me, it works for them too.
I had to use a 30x30 transparent gif as a background.
background:url('absolute path here');
A very simple CSS method to have a clear transparent background in html is this code.
background: rgba(0, 0, 0, 0.6)!important;