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.
Related
I have some CSS that changes the background color when you highlight any text on the page:
*::selection {
background:#083875;
color:white;
}
*::-moz-selection {
background:#083875;
color:white;
}
The problem is that the background color of this text (on highlight) is slightly transparent. Is there any way to make the background completely solid using only css?
This issue is occurring in Opera 25.
In Opera 25, you can't control the opacity of the selection of text.
Even forcing the opacity using the rgba(0,0,0,1) produces a semi-transparent background.
*::selection {
background: rgba(255,0,0,1);
color:white;
opacity: 1;
}
http://jsfiddle.net/j9u9qx8x/1/
Test results in Opera 25
Perhaps try submitting a support ticket to the Opera development team to see if they can allow this functionality. It makes sense that you should be able to override the transparent effect by forcing the opacity in the rgba() color syntax.
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;
}
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
I have code that works in Chrome and Firefox, but not in IE8.
<a href="javascript:void();" class="shareActionLink" id="comment">
<img src="comment.gif" class="shareActionImage" />Comment
</a>
The CSS for this is:
.shareActionLink:link, .shareActionLink:visited
{
margin-right:8px;
color:#999;
opacity:0.6;
filter: alpha(opacity=60); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; /*IE8*/
background-color: #fff;
}
#shareActionsBox .shareActionLink:hover
{
color:#333;
text-decoration:none;
opacity:1.0;
filter: alpha(opacity=100); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /*IE8*/
}
Based on other StackOverflow posts, I added the IE filters, which helped to adjust the text opacity, however, the image opacity still doesn't change in IE. It works fine in other browsers.
I suspect that this is happening because the img is nested within the link. How do I get the image to change opacity in IE??
Thanks
MS filters only work in IE7 if the hasLayout property is set to true, they only work in IE8 on block elements, or if you set the display property to block or inline-block.. as you're trying to use this on an inline element, the a, then setting display: inline-block; should solve it for all IE's as it works to set hasLayout for IE7 and also keeps IE8 happy
.shareActionLink {
display: inline-block; /* IE needs but shouldn't hurt anyone else */
}
.shareActionLink:link, .shareActionLink:visited {
margin-right:8px;
background: #fff;
color:#999;
opacity:0.6;
filter: alpha(opacity=60); /* IE */
}
.shareActionLink:hover {
color:#333;
text-decoration:none;
opacity:1.0;
filter: alpha(opacity=100); /* IE */
}
Off the top of my head, setting opacity on a parent element means it's children elements get, erm, opacitied? as well.
To target the image specifically, add img after each of the css selectors; e.g.:
#shareActionsBox .shareActionLink:hover img
to target the image whenever the parent link is something (in this case when hovered).
I could not get this to work in IE6 without targeting the <img> element. I've not got IE8 installed so cannot be sure this demo will work in that browser. However, it does work in IE6, Chrome11 and Firefox4.
Also, it is worth noting that if your comment.gif has transparency then you may have further problems with the transparent part unless you set a background-color or use JavaScript to handle the hover. See another answer I wrote on this.
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;
}