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(...)
Related
This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 9 years ago.
Hi all i created a parent div .ima inside which one div called .txt When i give a opacity to .ima then the opacity is applied to .txt automatically this is obvious. But i don't want it to be in this way.
Only .ima should be in 0.5 Opacity and the Text in .txt should be 100% visible.
Is there a way to do this?
Here is the fiddle
I tried Giving Opacity to 1 in .txt its not working. I might Be doing this in a wrong way I don't know.Any help?
Here i mention the Different From the Question refering for possible Duplicate
There They Have given Suggestion to Use rgba But here i don't want to use it Because if i use rgba then this will become either black or some other color that we'll mention.
I want to use background image here.
This is a sample am proposed.
Things like there is no possible.
Also I don't want to use .png images(with semi-transparency). images are subject to change that is why.
Any Way thanks for guys Who have given their answers here.
The simplest way of doing this assumes you only want .ima's background to be transparent, in which case you should remove opacity and establish a background-colour with a value of rgba(X%,X%,X%, .5), in which case .txt inherits nothing and you can carry on.
<div class="ima">
<div class="txt">
...
</div>
</div>
CSS for transparent background:
.ima {
/* rgba is Red, Green, Blue, Alpha:
* put in your colour as RGB then add opacity at the end */
background-color: rgba(255, 0, 0, .5);
}
But if you want some of .ima's children nodes to inherit the transparency (for instance text and elements other than .txt) then the simplest way is to create an immediate descendant that matches the dimensions of .ima and applies the opacity rule:
<div class="ima">
<div class="txt">
...
</div>
<div class="ima__transparency">
...
</div>
</div>
CSS:
.ima {
position: relative;
}
.ima__transparency {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: .5;
}
.txt {
position: relative;
z-index: 1;
}
Example with background image.
You can't not inherit opacity, your options are:
Adjust your markup so that .txt is not a child of .ima and then use absolute positioning
Don't use opacity, make .txt cover the same area as .ima and give .txt a semi-transparent background
If your target audience supports gradients and multiple backgrounds, you can layer an obscuring gradient over the image:
background: linear-gradient( rgba(255,255,255,0.5),rgba(255,255,255,0.5)),
url('http://www.bing.com/az/hprichbg/rb/NewportOR_ROW5865752464_1366x768.jpg');
Using this approach you actually only need one div if it's just the text and the image you want to display.
Create a png image(1px/1px) transparent with 60% opacity using photoshop and call in your parent div i.e.
.ima{
background:url(imagename.png) repeat 0 0;
}
Unfortunately you can't using opacity as it is inherited by design.
You could, however, if you are only seeking to make the background color of the parent div semi-transparent using rgba color syntax and a fallback for older versions of ie that do not support the syntax.
e.g. Create a white background with an opacity of 50%.
.parent{
background: rgba(255, 255, 255, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF); /* IE6 & 7 */
zoom: 1;
}
/* IE9 hack to remove filter */
.parent:not(dummy) {
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}
The first two hex values in the filters represent the opacity of the background. There is a great explanation and rgba to hex converter here.
Word of note. Using this technique reveals a bug in IE where hyperlinks will be exposed through the background of the container if placed above them, for example if used to generate a model background.
You can use :after/:before
HTML <div>asdsadasd</div>CSS
div{position:relative;}
div:after{
content:'';
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: #000;
opacity:0.3;
z-index: -1;}
The thing is, the opacity property applies on the whole block. It means that if you apply a 1 opacity to any child element, it will have the maximum opacity towards its parent.
I suggest you use a semi transparent PNG background and add a fix so that older versions of internet explorer handle the opacity :
.ima {
width:auto;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='url_to_transparent_image.png');
}
.ima[class] {
background-image:url('url_to_transparent_image.png');
}
.txt {
color:white;
}
That is, it's only if you really need a totally opaque text. You can also set the opacity of the parent a bit higher so that your text isn't too transparent and avoid using "dirty" CSS tricks.
I cannot solve a css problem.
I have a nav bar which should be transparent. But the links on it also get transparent due to the opacity attribute and because they are child elements of the transparent navigation bar.
can u help me to solve this?
If you dont want your link text to be affected you should modify the rule for the .container selector to look like this
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
it will keep your background color design without affecting your text
Opacity , as well said here several times , affect the element and its children
Using opacity . Text is affected
Using rgba(255,255,255,0.5), children not affected
Take care of the other rules that can take action due your javascript and hover situations
Fiddle here
Bis spater
The solution is easy. Just set the background-color CSS property to transparent.
.nav {
background-color: transparent;
}
In css3 you can use transparent backgrounds instead of making the whole panel transparent.
To add a transparent color you can do: rgba(255,255,255,.5) where the .5 is the opacity.
You should try just a simple css background property.
.navbar
{
background-color: transparent;
}
I use transparent png image (bg.png) with the desired opacity, and call it like this:
.menu
{
background: url('bg.png') repeat;
}
The png image can be small, even 1x1 pixel. The repeat is to fill the background space entirely.
its as simple as this
background: none;
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 have been struggling to find out why this rollover is not behaving as it should in IE8.
Go here: http://baked-beans.tv in IE8, you'll see that the rollover only works on the lower half of the thumbnails.
Btw, this is not activated by an <a> tag but by a :hover for the <div>.
What I can't figure out is why it works on only the lower half of the div, below the image, but not on the image (the image is not z-indexed so thats not the issue)
As soon as I change the background-color to anything else besides transparent, it works 100%. So this just blows my mind... why the bottom half, but not the top half, and only when I set bg-color to transparent?! Gotta love Internet Explorer.
This works as it should on every other browser (the entire square acts as a rollover)
Here's the CSS:
.cat_rollout {
position: absolute;
float:left;
top:0;
left:0;
min-height:274px;
min-width:274px;
font-size: 0;
background-color: transparent;
}
.cat_rollout:hover {
background-image: url(images/rollover.png);
min-width:254px;
min-height:242px;
padding-left: 20px;
color: white;
font-size: 21px;
font-weight: normal;
line-height: 24px;
padding-top: 34px;
}
Try faking a background image or setting it to a blank.gif instead of making it transparent.
background:url(blank.gif);
See http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/
The problem is that for some time (a week? two weeks?) IE has changed the way it interprets background-color. It seems that you cannot say, that the color is transparent, rather the whole background. So you should change background-color: transparent into background: transparent. Very nasty.
The same problem has been witnessed, where hovering on a transparent element's blank area doesn't make css rules related to hover take effects. The problem is fixed with giving the element the following style.
background-color: rgba(0, 0, 0, 0.001);
You could also try changing the hover selector to :
.thumb_container:hover .cat_rollout {...}
so that the parent containment div is the element reacting to the hover.
You can use an 1x1 transparent gif as a datauri if you'd rather.
background-image:url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
Up to you which one you'd prefer, this works and is an alternative to the selected answer.
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