How can i make the opacity background in css? - html

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.

Related

Layer one DIV over another to provide a transparent background with strong text

What I want to do is have a div with a transparent background that doesn't affect the text. Consider the following HTML:
<section class="content">
<header>
<h1>Description</h1>
</header>
Code
</section>
If I were to give it the following CSS:
background-color: #7ac0da;
opacity: 0.5;
filter: alpha(opacity=50);
The text would suffer from the transparency of the section. So, I started trying to layer the content like this:
<div class="code-sample">
<div class="background"></div>
<section class="content">
<header>
<h1>Description</h1>
</header>
Code
</section>
</div>
However, with an enumerable number of iterations I'm unable to get the section to layer over the div. I'll be honest, I've tried positioning the inner div and section absolute and relative. I've tried using the z-index. But really, I'm just shooting in the dark here. I'd like the .background to have a transparent look:
background-color: #7ac0da;
opacity: 0.5;
filter: alpha(opacity=50);
but yet the .content then overlay that div. This will allow me to then float the .code-sample div and do like a three-column layout with those.
How can I achieve what I'm looking for?
Use RGB color to only set the transparency for the background:
.class {
/* 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)";
}
Source
No need for the extra background div, use RGBA values on .section to get a semi-transparent background which doesn't affect child elements
.content {
background: rgba(0, 0, 0, 0.2)
}
Using RGBa sometimes gives rough edges in texts in Firefox. So it may be better in some cases to use semi-transparent png as background (may use data-uri).

z-index and opacity issues

I'm trying to make a wrapper at the back off all of my DIV's that will appear transparent (opacity: 0.6), but everything in front of that is appearing transparent too.
Any ideas how to fix this?
You can find the example here: http://testing.squaretise.com/ (I have given the wrapper (#wrap) a red border so you can interpret easier)
Use instead of:
opacity: 0.6;
this:
background: rgba(255, 255, 255, 0.6);
The color is in RGB and the last digits are for the transparency level.
You'll need to position your transparent div absolutely.
http://www.w3.org/TR/css3-color/#transparency explains how the descendants pick up the transparency.
Opacity is inherited. If the parent is see through, so are the children.
A better way to do this is to remove opacity and set the background color to be transparent:
.foo {
background: rgba(0,0,0,.5);
}
You should use transparent background, instead of opacity.
Background-image is the best way if you want to support IE8. (CSS3 Colours: http://caniuse.com/#search=rgba)
Use data-uri for better performance.
You could even do it with opacity. Here's an example:
HTML
<div id="wrapper">
<div id="contentOrWhatever">
</div>
</div>
CSS
body {
z-index:0;
}
#wrapper {
z-index:1;
opacity:0.6;
}
#contentOrWhatever {
z-index:99;
opacity:1;
}
So #wrapper ist now transparent and is ALWAYS behind #contentOrWhatever.
Hope I could help you.

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 do a transparent background color on text?

Look at http://www.sydsvenskan.se/ or just look at the image bellow, and check their big image with text overlaying it at the top of the site.
They have a black transparent background on the text, but the text itself isn't transparent. How do they accomplish this?
If I try to add transparency on a text block with background set, the text gets transparent as well.
CSS 3 introduces rgba colours. Use one for the background.
For compatibility with browsers that do not support it you can fallback to solid colours or translucent PNGs.
They use a semi-transparent PNG background image.
.supertop div h1 a {
color: #FAFAFA;
background-image: url("/template/ver2-0/gfx/trans_black.png");
padding: 2px 10px;
line-height: 60px;
}
this is the safest approach at the moment, as long as not all browsers support rgba colours.
It will be an opaque grey in IE6, which doesn't support alpha transparency.
Background image is the key http://www.sydsvenskan.se/template/ver2-0/gfx/trans_black.png
it has a black transparent background image, firebug it and you'll see it.
Use RGBa!
.alpha60 {
/* Fallback for web browsers that doesn'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)";
}
via http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/