I'm trying to have a container element faded using:
zoom: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=14)"; /*IE 8,9*/
filter: alpha(opacity=14); /*IE 5,6,7*/
opacity: .14; /* Good Browsers */
Within this container, I have children elements that are positioned relative with position absolute children in those. IE 8 and below have determined that these elements shouldn't listen to the transparency and should show at full opacity.
Is there any way to make IE respect the transparency of the positioned elements they should have? These elements fade in/out and have effects on them, so I'd like to avoid having numerous IE hacks everywhere in javascript, and if I duplicate the transparency in CSS on them other browsers will fade them again, making them almost invisible.
There are comments on JQuery's .fadeTo() method page that reference this bug. Unfortunately, there also doesn't seem to be any fix at the moment other than to apply the fading to each absolutely positioned element instead of the parent.
Try this technique, it's pretty cool. I've used this style:
.alpha80 {
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.8);
background: transparent !ie;
zoom:1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCffffff,endColorstr=#CCffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCffffff, endColorstr=#CCffffff)";
}
And then for your HTML:
<div class="alpha80">
<!--your content-->
</div>
Related
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 8 years ago.
Wasn't sure, how to name this question, but, I've ran into a problem (minor, but still), I have a main div container, which is basically a white text box, that is 92% opaque:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=92)";
filter: alpha(opacity=92);
opacity:.92;
This works fine, however, on some pages I have a Jplayer audio player and that turns 92% transparent too. Does anyone know a way where I can still have the transparency, but keep objects inside the main div container fully opaque?
Use This CSS-
#div{
background: rgba(255, 255, 255, 0.92);
}
Then Use this script for browser compatibility in IE.
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
zoom: 1;
}
</style>
<![endif]-->
Use background: rgba(255, 255, 255, 0.92);
When you use the background property it only applies the alpha (the last value, opacity) to the background itself. Use this instead of the ms-filter as it works across all **modern browsers.
#parent{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=92)";
}
#parent>*{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
This'll make the parent's alpha 92% and it's children 100%. But I can't remember if this sets the Opacity of the element or the alpha? Because if it sets the opacity of the element. Every element within the parent will also be affected. Another way would be to use an background image, selecting ie 8 and below to use an alternative method or some very awkward positioning.
I want an Vista/7-aero-glass-style effect on a popup on my site, and it needs to be dynamic. I'm fine with this not being a cross-browser effect as long as the site still works on all modern browsers.
My first attempt was to use something like
#dialog_base {
background:white;
background:rgba(255,255,255,0.8);
filter:blur(4px);
-o-filter:blur(4px);
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter:blur(4px);
}
However, as I should have expected, this resulted in the content of the dialog being blurred and the background staying clear. Is there any way to use CSS to blur the background of a semitransparent element instead of its contents?
OCT. 2016 UPDATE
Since the -moz-element() property doesn't seem to be widely supported by other browsers except to FF, there's an even easier technique to apply blurring without affecting the contents of the container. The use of pseudoelements is ideal in this case in combination with svg blur filter.
Check the demo using pseudo-element
(Demo was tested in FF v49, Chrome v53, Opera 40 - IE doesn't seem to support blur either with css or svg filter)
The only way (so far) of having a blur effect in the background without js plugins, is the use of -moz-element() property in combination with the svg blur filter. With -moz-element() you can define an element as a background image of another element. Then you apply the svg blur filter. OPTIONAL: You can utilize some jQuery for scrolling if your background is in fixed position.
See my demo here
I understand it is a quite complicated solution and limited to FF (element() applies only to Mozilla at the moment with -moz-element() property) but at least there's been some effort in the past to implement in webkit browsers and hopefully it will be implemented in the future.
In recent versions of major browsers you can use backdrop-filter property.
HTML
<div>backdrop blur</div>
CSS
div {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
or if you need different background color for browsers without support:
div {
background-color: rgba(255, 255, 255, 0.9);
}
#supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
div {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
}
Demo: JSFiddle
Docs: Mozilla Developer: backdrop-filter
Is it for me?: CanIUse
You can use a pseudo-element to position as the background of the content with the same image as the background, but blurred with the new CSS3 filter.
You can see it in action here: http://codepen.io/jiserra/pen/JzKpx
I made that for customizing a select, but I added the blur background effect.
There is a simple and very common technique by using 2 background images: a crisp and a blurry one. You set the crisp image as a background for the body and the blurry one as a background image for your container. The blurry image must be set to fixed positioning and the alignment is 100% perfect. I used it before and it works.
body {
background: url(yourCrispImage.jpg) no-repeat;
}
#container {
background: url(yourBlurryImage.jpg) no-repeat fixed;
}
You can see a working example at the following fiddle: http://jsfiddle.net/jTUjT/5/. Try to resize the browser and see that the alignment never fails.
If only CSS element() was supported by other browsers other than Mozilla's -moz-element() you could create great effects. See this demo with Mozilla.
Use an empty element sized for the content as the background, and position the content over the blurred element.
#dialog_base{
background:white;
background:rgba(255,255,255,0.8);
position: absolute;
top: 40%;
left: 50%;
z-index: 50;
margin-left: -200px;
height: 200px;
width: 400px;
filter:blur(4px);
-o-filter:blur(4px);
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter:blur(4px);
}
#dialog_content{
background: transparent;
position: absolute;
top: 40%;
left: 50%;
margin-left -200px;
overflow: hidden;
z-index: 51;
}
The background element can be inside of the content element, but not the other way around.
<div id='dialog_base'></div>
<div id='dialog_content'>
Some Content
<!-- Alternatively with z-index: <div id='dialog_base'></div> -->
</div>
This is not easy if the content is not always consistently sized, but it works.
In which way do you want it dynamic? If you want the popup to successfully map to the background, you need to create two backgrounds. It requires both the use of element() or -moz-element() and a filter (for Firefox, use a SVG filter like filter: url(#svgBlur) since Firefox does not support -moz-filter: blur() as yet?). It only works in Firefox at the time of writing.
See demo here.
I still need to create a simple demo to show how it is done. You're welcome to view the source.
One liner code -
backdrop-filter: blur(5px);
I am applying an overlay effect to a webpage with the CSS shown here:
.jqifade{
position: relative;
background-color: #000000;
height:2315px !important; /*set to page height*/
}
This CSS overlays the entire webpage with a color (black) which is later set to 30% opacity with JS. I would like to exclude a div with id="noOverlay" so that the CSS is NOT applied to this div. Is this possible? And if so... how??
It may be possible to make the z-index of that certain element higher than the overlay. Also for the overlay you might consider using rgba for the opacity.
.jqifade{
position: relative;
background-color: rgba(255, 255, 255, .3);
height:2315px !important; /*set to page height*/
}
Just watch for browser compatibility with this.
The simplest solution is removing class jqifade from div with id noOverlay:
$("#noOverlay").removeClass("jqifade").
Or use CSS3 :not selector (works in all modern browsers):
.jqifade:not(#noOverlay) {}
EDIT:
Another solution: apply css styles using jQuery:
$(".jqifade:not(#noOverlay)").css(...)
<style type="text/css">
div#foo {
background: #0000ff;
width: 200px;
height: 200px;
opacity: 0.30;
filter: alpha(opacity = 30);
}
div#foo>div {
color: black;
opacity:1;
filter: alpha(opacity = 100);
}
</style>
<div id="foo">
<div>Lorem</div>
<div>ipsum</div>
<div>dolor</div>
</div>
In the above example, the opacity of div#foo is inherited by child elements, causing the text to become nearly unreadable. I suppose it's wrong to say it is inherited, the opacity is applied to the parent div and the children are part of that, so attempting to override it for the child elements doesn't work because technically they are opaque.
I typically just use an alpha png background image in such cases, but today i'm wondering if there's a better way to make a background of a div semi-transparent without affecting the contents.
You may use rgba().
div#foo
{
background: rgba(0, 0, 255, 0.3);
}
To make it work in old Internet Explorers use CSS PIE. There are some limitations, but those are handled in a backwards compatible way: the RGB value will be rendered correctly and the opacity will be ignored.
The best way is setting transparent png to background..
If you use opacity, you'd have to put them in separate DIV's and then line them up together. The background DIV would have the lower opacity, and foreground DIV would have your content with 100% opacity.
I'm just starting to build a website, and am just fleshing out the css.
Two problems:
I'm using rgba to get a transparent background, and using a transparent png to emulate this in older browsers. I'm using a cascade like this:
rule {
background: url(/media/img/white_0.9_pixel.png);
background: rgba(255, 255, 255, 0.9);
}
In IE these backgrounds don't cover the whole of the sections they are applied to... Any ideas why?
The drop down menu is incorrectly placed in IE. I'm positioning it absolutely, but adding a margin to shove it into the right place in Webkit - guessing that's the wrong way to align a drop down, and it's not working across browsers. Any suggestions there?
Thanks a lot - just writing questions on here helps me to think!
A link to the site : http://bit.ly/11GGCx
Which IE versions exhibit the problems?
As with many IE bugs, try giving layout to the elements with improperly rendered backgrounds.
When you don't specify the "left" property of an absolutely positioned element, IE rarely generates the value you want. According to the CSS 2.1 spec, "left" should be set to the static position, but the browser can guess this position so it's best to be explicit. The standard method is to give the menu items relative positioning to create a containing block for each submenu and set "top" and "left" for the submenus.
.nav li {
position: relative;
/* note: don't set a box offset (e.g. "left") here */
}
.nav ul {
position: absolute;
top: 1em;
left: 0;
}
Did you specify background-repeat?
Have you tried with css opacity concept?
Try the below code.
rule {
background: #fff;
opacity: .5;
-moz-opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* for IE8 *//* Comes First to apply optacity in all ie versions*/
filter: alpha(opacity=50); /* for IE5-7 *//* Comes second to apply opacity in all ie versions*/
}
Note: Don't change the order of above lines. Also i recommend not to use rgba background.
Try this. Hope this helps