I'm trying to incorporate thickbox on my site. Basically, it's just a fancy javascript alert with a lot more functionality. However, when you the thickbox appears it darkens the rest of the screen. Id rather not have this. I have searched the CSS file extensively and cannot find how to change the opacity/background color. Any help would be appreciated.
link to CSS file:
http://jquery.com/demo/thickbox/thickbox-code/thickbox.css
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
The "darkening of the screen" is caused by a black overlay with 75% opacity.
Change background-color to transparent if you do not want this.
It's this:
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
You can just empty the content or remove it altogether and problem is fixed!
#riku; you can use rgba for transparent color, like this
css:
.TB_overlayBG {
background: rgba(0,0,0,0.7)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */
}
Because rgba is not transparent it's content as opacity does
For more check THIS
Related
i try to make a container for my site in google site that will be transparent so that the
background image will be visible.
i guess opacity property of css3 is not supported by google sites,
so is there any other way to do that? thanx
i tried
filter: alpha (opacity=50); -moz-opacity: 0.50; opacity: 0.50; -khtml-opacity: 0.5; but it's not recognized.
WARNING: Your HTML contains some tags that are not permitted. These have been removed from your changes.
If it allows you you can do that by applying a semi-transparent 1px x 1px .png image to the background of your container.
.yourContainer {
background:transparent url(myTransparentImage.png) repeat;
}
In my CSS I have the following:
.Thing {
filter: alpha(opacity=40);
opacity:0.4;
-moz-opacity:0.4;
}
.Thing button {
filter: alpha(opacity=100);
opacity:1;
-moz-opacity:1.0;
}
However, the button is still .4 opacity. I then try opacity: 2 and such and it looks like I can give it less opacity but not more. Is there a way I can remove it or do I have to write multiple rules to get everything but the button?
I am testing with Firefox and Chrome.
use rgba with a rgb fallback.
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.5); /*ie6 will ignore this*/
rgba will only apply opacity to the target element.
What i've recently been doing is using the rgbapng sass/compass plugin which generates a png image to use as a fallback for browsers without rgba support.
Note: you'll still need to use an ie6 png fix for this to work.
Not a fix for the opacity issue but a possible workaround.
How about removing the button from the normal document flow and then placing back inside the .Thing
Something like this: http://jsfiddle.net/CqgkM/
I'm trying to get this thing to work in IE (any version - works in FF, Opera, Safari, Chrome ...):
I have a DIV with a background-image. The DIV also contains an image that should be transparent onMouseOver. The expected behaviour now is that the DIV-background would shine through the transparent image (which it does in all browsers but IE).
Instead it looks like the image is getting transparent but on a white background, I can't see the DIV's background through the image.
Here's some code:
<div><img /></div>
And some CSS:
.dojoDndItemOver {
cursor : pointer;
filter : alpha(opacity = 50);
opacity : 0.5;
-moz-opacity : 0.5;
-khtml-opacity : 0.5;
}
.dragItem:hover {
filter : alpha(opacity = 30);
opacity : 0.3;
-moz-opacity : 0.3;
-khtml-opacity : 0.3;
background : none;
}
All of this is embedded in a Dojo Drag-n-Drop-system, so dojoDndItemOver will automatically be set to the DIV on MouseOver, dragItem is set to the href around the image (using the same class on the image directly doesn't work at all as IE doesn't support "hover" on other items that href).
Any ideas? Or is it an IE-speciality to just "simulate" transparency on images by somehow just greying them out instead of providing real transparency and showing whatever is beneath?
a.dragItem {/*Background behind the image*/}
a.dragItem img {/*Image is opaque, hiding the background*/}
a.dragItem:hover img {/*Image is transparent, revealing the background*/}
IE uses the CSS filter:alpha(opacity=x) taken from w3Schools CSS Image transparency. You can also apply it to DIV backgrounds.
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
I think that filters are a bad idea, so also you can use transparent pngs with IE as shown here.
I got from web designer layout, which contains (probe):
<div id="subMenuRow">
<div id="subMenuRowHTML">
Link
</div>
</div>
and respectively css for it:
#subMenuRow{
width: 900px;
height: 40px;
background: #000000;
float: left;
clear: both;
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
Opacity is used to make transparent bar for html menu. The problem is, that every text including links contains transparency as well, which is very unnecessary. How to avoid opacity for subMenuRowHTML?
First you don't need to use -moz-opacity and -khtml-opacity anymore. They are very very old.
There is no solution fully supported today. CSS3 RGBA solves this in modern browsers but if you need to support old browsers you will need to use semi transparent png:
#subMenuRow { background: url(semi-trans.png); }
IE6 will degrade gracefully with this:
* html #subMenuRow { background: url(full-opacity.gif); }
There are also easy options for png transparency on IE6. It's up to you.
If you have many instances of opacity on your code and don't want to mess up your code with * html everywhere you can use conditional comments.
use a semi transparent .png as a background image:
css:
background: transparent url(/url/image.png) top left repeat;
Add:
#subMenuRowHTML {
filter:none;
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}
Can I control the visibility of some div in my website and make to become see-through using CSS only? In flash it's done through controlling what is called Alfa so I'm wondering if such a thing exist in CSS!
Edition 001
Can I control the opacity of the div's background only? So the text in the div wouldn't be effected?
You can use opacity in CSS
.transparent_class {
opacity: 0.5;
}
I think there are some problems with opacity in Internet Explorer so here is example how to change transparency in IE:
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
HTH
http://www.quirksmode.org/css/opacity.html
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
Another way to make only the background transparent is by using a transparent png as background-image, and then use this jQuery fix for the special snowflake IE. This works in all browsers as far as I know.
Here is a good link talking about CSS navigation menue I hope it would be helpful:
http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml