How can i only impact the opacity of a parent element and not its children
eg,
i want signup_backdrop opacity to be set at 0.5 but it's child element signup_box i don't want to have any opacity at all but it will apply the opacity set in signup_backdrop as inherited.
You can't. You'll need to super-impose (positioning, and z-index) the children over the parent, meaning they will no longer be children. That, or use transparent PNG's for the parent background, and set opacity for any siblings of the fully-opaque child.
*untested, but should be good.
.signup_backdrop {
position:fixed;
top:0; left:0;
background:#333333;
width:100%; height:100%;
z-index:10;
}
.signup_box {
position:fixed;
top:25%; left:25%;
background:#ffffff;
width:50%; height:50%;
z-index:20;
}
<div class="signup_box">
<p>Hello World</p>
</div>
<div class="signup_backdrop"></div>
In CSS 3 you have rbga() to add a color and opacity to a certain element.
It is so far implemented in Safari 3 and Firefox 3 only.
For other browsers use the tricks from Jonathan Sampson's answer.
Related
Below is the code for a div inside a div sliding up to 50% using a css transition. I am having a problem though with my classes and id. The CSS is correct however I can not get it working, could somebody please tell me where I have gone wrong?
Thanks in advance.
CSS
<style>
.maincontentdiv {
position:relative;
height:200px;
width:200px;
background:red;
}
.slideup {
position:absolute;
bottom:0;
max-height:0;
overflow:hidden;
background:blue;
transition:max-height 250ms ease-in;
}
.maincontentdiv:hover {
max-height:50%;
}
</style>
HTML
<div class="maincontentdiv">
<div class="slideup"></div>
</div>
It works fine when I used div and div div instead of classes and id, but when I try to use classes and id it stops working so I dont think it would be the actual code :)
http://jsbin.com/slideUpUsingMinHeight/
.maincontentdiv {
position:relative;
height:200px;
width:200px;
background:red;
}
.slideup {
position:absolute;
width:100%; /* Absolute el. loose width so... */
bottom:0;
min-height:0; /* Use min- height instead */
background:blue;
transition: min-height 250ms ease-in; /* target min-height respectively */
}
.maincontentdiv:hover > .slideup { /* hover el > children selector */
min-height: 50%; /* and animate! */
}
You have to define the width&heightof the small div.The property max-height just sets a limit to the height,not defines it.
Secondly you need to hover the big div,not the small one,cause it's width and height are both 0,how can you hover it?
Demo
Hope this will do some help.;-)
<html>
<head>
<style>
#main{
opacity:1 !important;
position:absolute;
width:500px;
height:500px;
top:150px;
left:300px;
}
body{
opacity:0.3;
}
</style>
</head>
<body>
<div id="main"></div >
</html>
This is the code.I want to apply low opacity to body and a maximum opacity to id Main ,i have tried like this but i did not achieved the desired output.Is there any other way to achieve this.
Thanks in Advance.
The problem here is that the opacity is inherited from the body by the div. Also, it seems that the opacity doesn't work on the body itself at all (which surprises me).
If you just want a semi-transparent background color on body you should use background-color: rgba(x,x,x,x). If you want a transparent image in the body, look at this question:
CSS Opacity inheritance issue
What do you want exactly ? I've test your code, and for me it's good, i've a body without opacity, and a main with opacity.
the opacity in css is applied to all child elements of the element you applied the opacity to, you could place a div as an overlay or underlay with the opacity you want here is a fiddle
<body>
<div class="overlay"></div>
<div class="main"></div>
</body>
.overlay {
position:fixed;
width:100%;
height:100%;
opacity:0.3;
}
I have 2 divs inside a wrapper div and I was wondering if it's possible to bring the #wrapper div on top of the content (#outer and #inner).
<div id="wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>
I want the #wrapper to add a transparent background without making any changes to the HTML. I have tried doing so using z-index without success.
See this fiddle: http://jsfiddle.net/nPpDE/
Any help is much appreciated.
Managed it using :after- http://jsfiddle.net/t6mMR/ -No extra html!
Like this:
#wrapper:after {
position:relative;
top:-200px;
left:0px;
content:"";
width:400px;
height:200px;
display:block;
background:rgba(255, 0, 0,0.5)
}
The pseudo-element is placed above the others, and a semi transparent background applied to it.
__
EDIT: A slightly different way of doing it- (see comment below) (using position:absolute
http://jsfiddle.net/t6mMR/1/
__
Note- To be able to "click through" the pseudo-element, add pointer-events: none; to it.
http://jsfiddle.net/t6mMR/1/
To get this to work in IE, see css 'pointer-events' property alternative for IE, it may help.
You can give the children position: relative and z-index: -1 (or otherwise negative value), but I'm not sure how buggy that is or what the browser support is.
some more info available here: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Here's a quick example: http://codepen.io/Rykus0/full/jhwev
Otherwise, as others have said, you need to include a new element and position using either absolute or fixed
What you are asking is not possible.
However, it is possible when you add another div inside the #wrapper and position it with
position:absolute;
and give it a transparent color
http://jsfiddle.net/nPpDE/1/
EDIT: Harley's solution is better since the OP doesn't want to change the HTML
?? and what about having opacity colors on inner containers and regular color on main container:
#wrapper{
position:relative;
background:black;
width:400px;
height:200px;
}
#outer{
position:relative;
width:400px;
height:200px;
background: rgba(50,0,0,0.75);
}
#inner{
position:relative;
width:350px;
height:200px;
background:rgba(0,50,0,0.75);
margin: 0 auto;
}
fiddle that goes with it :) http://jsfiddle.net/nPpDE/2/
Here is a behavior I don't quite understand regarding z-index and css pseudo element ::before / ::after.
It is illustrated on this jsfiddle : http://jsfiddle.net/jgoyon/T6QCf/
I created a positioned box and added content with ::after pseudo element (positioned as well).
if I set a z-index to the ::after pseudo element, everything is working well and I can position it over or under the parent by playing with z-index
#no-z-index {
background:lightblue;
width:100px;
height:100px;
position:relative;
}
#no-z-index:after {
content: 'z-index -1';
width:50px;
height:50px;
background:yellow;
position:absolute;
z-index:-1; /* z-index in question */
top:70px;
left:70px;
}
if I do the same and set the z-index of the parent, it doesn't work anymore.
#z-index {
background:lightblue;
left:200px;
width:100px;
height:100px;
position:relative;
z-index:0; /* parent z-index */
}
#z-index:after {
content: 'z-index -1';
width:50px;
height:50px;
background:yellow;
position:absolute;
z-index:-1; /* z-index in question */
top:70px;
left:70px;
}
Is it an expected behavior ?
This is expected behavior, documented in the spec.
When you don't specify z-index on the generating element (defaulting to auto), the generating element and the pseudo-element will appear in the same stacking context. This allows the pseudo-element to appear below the element if its z-index is lower.
When you do specify z-index on the generating element, that element creates a new stacking context for the pseudo-element (and in fact all of its descendants), preventing the pseudo-element from ever appearing below it even if you give it a negative z-index.
This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 7 years ago.
Hey i am searching in google but i can't fine any perfect answer
I want to Opacity in parent DIV but not Child DIV
Example
HTML
<div class="parent">
<div class="child">
Hello I am child
</div>
</div>
Css
.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}
Note: -- I want to background-image in Parent Div not Color
I know this is old, but just in case it will help someone else.
<div style="background-color: rgba(255, 0, 0, 0.5)">child</div>
Where rgba is: red, green, blue, and a is for transparency.
May be it's good if you define your background-image in the :after pseudo class. Write like this:
.parent{
width:300px;
height:300px;
position:relative;
border:1px solid red;
}
.parent:after{
content:'';
background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
opacity:0.5;
}
.child{
background:yellow;
position:relative;
z-index:1;
}
Check this fiddle
You can do it with pseudo-elements: (demo on dabblet.com)
your markup:
<div class="parent">
<div class="child"> Hello I am child </div>
</div>
css:
.parent{
position: relative;
}
.parent:before {
z-index: -1;
content: '';
position: absolute;
opacity: 0.2;
width: 400px;
height: 200px;
background: url('http://img42.imageshack.us/img42/1893/96c75664f7e94f9198ad113.png') no-repeat 0 0;
}
.child{
Color:black;
}
As mentioned by Tom, background-color: rgba(229,229,229, 0.85) can do the trick.
Place that on the style of the parent element and child wont be affected.
You can't. Css today simply doesn't allow that.
The logical rendering model is this one :
If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is .
Reference : css transparency
The solution is to use a different element composition, usually using fixed or computed positions for what is today defined as a child : it may appear logically and visualy for the user as a child but the element doesn't need to be really a child in your code.
A solution using css : fiddle
.parent {
width:500px;
height:200px;
background-image:url('http://canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%C3%AAte-011.jpg');
opacity: 0.2;
}
.child {
position: fixed;
top:0;
}
Another solution with javascript : fiddle
I had the same problem and I fixed by setting transparent png image as background for the parent tag.
This is the 1px x 1px PNG Image that I have created with 60% Opacity of black background !
You can't do that, unless you take the child out of the parent and place it via positioning.
The only way I know and it actually works, is to use a translucid image (.png with transparency) for the parent's background. The only disavantage is that you can't control the opacity via CSS, other than that it works!