set different opacity for nested elements - html

I want to make a win7 file exporlor-like effect: the title bar have a opacity less than 1, while the content have no opacity.
Then I tried to combine two elements together to make it:
<div id="outer" style="background-color:black;opacity:0.6;padding:30px;position:absolute;width:400px;height:400px;">
<div id="inner" style="background-color:gray;opacity:1;height:100%;"></div>
</div>
I want to make the div#outer have a opacity of 0.8,then make the div#inner have no opacity(with opacity=1).
However it seems that this does not work. Since the opacity of div#outer will affect that of the div#inner.
Any ideas?

However it seems that this does not work. Since the opacity of div#outer will affect that of the div#inner.
Correct.
But if what you want is just a translucent background, setting RGBA color as background-color would meet the needs. Like this:
<div id="outer" style="background-color: rgba(0,0,0,0.6);padding:30px;position:absolute;width:400px;height:400px;">
<div id="inner" style="background-color:gray;height:100%;"></div>
</div>
For more infomation, read MDN documents here: https://developer.mozilla.org/en-US/docs/CSS/color
For IE 7 support, I believe this(using generated background image files) is an acceptable solution.

The inner div will inherit the opacity of its container.
A cross-browser workaround is to avoid nested elements and use absolute positioning instead. You can see an example here where opacity is applied to the background but the text has an opacity of 1:
http://www.pathtosharepoint.com/Lists/May2010/calendar.aspx?CalendarDate=5%2F5%2F2010
Code sample (two span elements are placed side by side within the main span, the second one is the background that gets the opacity):
<span style="position:relative;display:inline-block;width:100%;height:100%;">
<span style="width:100%;height:100%;display:inline-block;text-align:center;cursor:pointer;border:1px solid Red;position:absolute;color:Red;font-weight:bold;">
11:00 AM Image Capture & ECM Using SharePoint
</span>
<span style="display:inline-block;width: 100%;height:100%;background-color:Red;text-align:center;border:1px solid;z-index:-1;filter:alpha(opacity=20);opacity:0.2;font-weight:bold;">
11:00 AM Image Capture & ECM Using SharePoint
</span>
</span>

Related

Is it possible to prevent the opacity of HTML elements from affecting the opacity of the TAB helpers? [duplicate]

This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 1 year ago.
(I wrote "tab helpers" in the title, which I guess is an invented terminology. Please, correct me.)
In the snippet below there's two checkboxes, one of which has opacity reduced to 20%.
.checkbox1 {
opacity: 100%;
}
.checkbox2 {
opacity: 20%;
}
<div class="checkbox1">
<input type="checkbox" id="myCheck1">
</div>
<div class="checkbox2">
<input type="checkbox" id="myCheck2">
</div>
If I tab-select the second one, I see this (well, not the stuff in blue):
Is there anyway to have that yellow thing retain 100% opacity even if the element's opacity is set via CSS to other than 100%?
I guess this might be all up to the browser, but I'm really not sure.
The yellow stroke is the outline and is notoriously hard to style since you're correct that it is browser-specific. User-defined styles can and often are disregarded wholesale by the browser.
As part of the element, it is affected by the value of the element's opacity property. This means you cannot set its opacity directly.
If you want to make the element semi-transparent without affecting the outline, you should style the other parts of the element with RGBA colors so you can set the transparency per-part. (see: I do not want to inherit the child opacity from the parent in CSS or #Rohit Azad Malik's answer to How to apply an opacity without affecting a child element with html/css?).
There are ways to style a checkbox (or other input types), but they're browser-specific.

image in div with z indexes

There is my code :
<div class='f-left vignetteFamille box-sizing'>
<div class='relative contenuVignetteFamille box-sizing' style='z-index:1;'>
<br/><br/><br/><br/>
<img class='absolute' src='./charte/famille/fondBasGaucheVignetteFamille' style='bottom:-21px;left:-4px;z-index:0;'>
</div>
</div>
I want my div contenuVignetteFamille hover the image but this doesn't work and I don't know why
EDIT:
there is my css but I don't know if will help you :
.vignetteFamille{background-image:url('./charte/famille/fondVignetteFamille.png'); background-repeat:no-repeat;background-position:bottom right;margin-right:16px;width:201px;margin-top:2px;padding-bottom:19px;padding-right:19px;}
.contenuVignetteFamille{width:100%;border:solid 4px #FFC600;}
I'm not sure if I understood your question correctly but I'm assuming you want to highlight the image when hovering the div contenuVignetteFamille?
This can be solved by adding css to the child when hovering the parent, like this:
.contenuVignetteFamille:hover img {
opacity: 0.5;
}
See my fiddle here.
On another note, don't use br tags to get some height on your div, add a height value instead. I've also moved your inline styling to the external one.

Why does id not override class in bootstrap?

I am working on front-end web development and keep running into the same issue. I am using bootstrap styling rules (bootstrap.css) with a few modifications.
HTML
<div class="container">
<div class="jumbotron">
<button type="button" id="jnav">Restricted</button>
</div>
</div>
style.css
#jnav{
opacity: 1;
}
From bootstrap.css
.jumbotron {
opacity: 0.75;
}
Basically, I wanted to use ID to override the opacity, so that the button would have an opacity of 1 while the rest of the jumbotron would have an opacity of 0.75. The problem is that the button's opacity is remaining at 0.75 (so it is annoyingly the same as the jumbotron background)! Does anyone know what's up? Is there something basic that I am missing? I thought that id was a more specific attribute and would override class styles.
Opacity doesn't inherit in the same way as things like color or background. Setting the opacity of an element makes that element and everything it contains render at that opacity relative to whatever is behind it. The opacity property of chile element then compunds like #techfoobar said. You can read more here.
Basically, what you need to do is set the opacity for each child of .jumbotron separately while leaving the opacity of .jumbotron at 1.
It's hard to say given the limited information, but it sounds like you're trying to place a button (#jnav) inside the jumbotron which has an opacity. Since the jumbotron has an opacity of 0.75, everything inside of it will follow that same opacity regardless of any other rules. This is not a problem with class/ID specificity or bootstrap, more just a general styling nuance.
Basically what Jcubed just said above.
Typically the selectors used in Bootstrap.css are very specific. The selector might be something like body > div > .jumbotron which is very specific. In this case simply using the element Id won't override the css. You will need to match the specificity or be more specific. For example body > div > #jnav would effectively override the css as they are both equally specific.
This of course assumes that the css you want to use comes after the css you are replacing. Either after it in the same css file or a seperate css file included after the base Bootstrap.css.
If worst comes to absolutely worst, then you can use:
#jnav{
opacity: 1 !important;
}
But this shouldn't need to happen unless you are absolutely desperate.
They do not override each other. They both applied, but #jnav is within .jumbotron. So .jumbotron's opacity will apply on top of #jnav's opacity.
If you just want the effect, you should use rgba
Example:
#jnav{
background: rgba(111, 111, 111, 0.1);
}
The last index is the opacity of the background, and it will not overlap with your font.
#jnav does have an opacity of 1. But that would be, in a sense, relative to its parent .jumbotron with an opacity of 0.75.
As techfoobar mentions, opacity is compounded with the inherited value. And hence, #jnav's opacity will effectively be 1 * 0.75.
Here's what MDN has to say:
The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.
View this question, if you want to achieve a transparent background but not the content effect.

IE wont show background image as border

http://dhrumin.com/uploads/index.html
Link above is my page I have been working on. I am using border top bottom as a background image. It looks great on Chrome and FF. But on IE it will just show one solid color background image wont show up.
Can someone help me with what I am missing out?
Thanks!
IE doesn't support the border-image property as you can see here. A workaround would be to create two divs, above and under and give them the desired background-image :
HTML :
<div class="myborder"></div>
<ul id="blockquote">
<li>Completely formulate parallel customer service rather than B2C initiatives.</li>
<li>Compellingly target efficient experiences whereas seamless partnerships.</li>
<li> Seamlessly transition customer directed applications whereas intuitive.</li>
<li> Holisticly mesh team building "outside the box" thinking.</li>
</ul>
<div class="myborder"></div>
CSS :
.myborder {
width: 600px;
height: 13px;
background: url('quote-border.png') repeat-x;
}
Don't accept this has the answer, i just moved content from 'comments'.
border-image is not supported in any version of IE currently - caniuse.com/#search=border-image – Nick
Indeed, you will have to split your html to make a top and a bottom div with background-image – Brewal
#Brewal, those are answers IMHO. – aldux
From my own, i would use :before and :after to create what you want.
You want something better ?
<div class="container with THE-texture and padding">
<div>Your content</div>
</div>
This way, the outter container would act like an image background-border. Here is a working example.
it is to be IDENTICAL in visual result than what you wish. In html, you added 1 extra container. That's a difference.
Oh, let me guess, there are 'simili' borders on the sides ? --> remove side's padding : http://jsfiddle.net/8puJf/1/

Opacity css affecting children elements

I am trying to implement an error message when user has disabled javascript. I have created a jsfiddle for my current work. I have 2 div layers one covering the whole page and an another one on top of that to show the warning message, but the opacity settings affects for the cover layer affects the warning message also. I have tried using the techniques from previous questions but I could not make it work. Can anyone help me?
http://jsfiddle.net/xcPcv/
Just move the message outside of the faded container ...
From:
<div id="fadeMe">
<div id="center">You have javascript disabled.</div>
</div>
To:
<div id="fadeMe">
</div>
<div id="center">You have javascript disabled.</div>
http://jsfiddle.net/xcPcv/7/
Instead of opacity, use rgba(0,0,0,.75) for the background:
http://jsfiddle.net/xcPcv/9/
The issue is that opacity applies to all contained (child) elements, not just the element you are applying
opacity
to. A side effect of this is that a further opacity setting will be that fraction of the parent opacity.
In your case you need to do nothing else but move the popup div outside the fadeMe div
<div id="fadeMe"></div>
<div id="center">You have javascript disabled.</div>