This question already has answers here:
how to cancel opacity for a child element?
(2 answers)
Closed 6 years ago.
I would like to set opacity to a parent div but not 1 particular child div.
So i have a html code like:
body {
background-image: url(http://url.jpg)
}
#main {
opacity: 0.9;
}
#slider {
opacity: 1;
}
<body>
<div id="main">
<div id="slider">
</div>
<div id="content-wrapper">
</div>
</div>
</body>
Obviously this won't work. The whole #main div is now transparant to the background div. That is what i want but not the #slider div. For some reason, when only setting opacity to the #content-wrapper, nothing happens at all.
Any ideas?
Edit:
I can't use an rgba color, since i would like the background image to come through. Could you explain why adding opacity to #content-wrapper is not working?
Maybe with rgba or hsla color code can help
#someParent {
background: rgba(0,0,0,0.5);
}
Related
This question already has answers here:
Opacity of div's background without affecting contained element in IE 8?
(8 answers)
Closed 7 years ago.
I'm trying to set an opacity to my background div, but all the content inside gets an opacity too. I don't want this.
I tried to fix it with pseudo elements but it didn't work out, I can fix this problem by adding a second background div and setting a height and position to that div, but I don't want to set a height for a div.
How can I fix this without adding a second div and height?
You can see my demo here
You could always use an RGBA value:
html {
background-color: red;
}
#login {
width: 365px;
background-color: rgba(255, 255, 255, 0.3);
padding: 37px;
}
https://jsfiddle.net/d2shse4c/2/
What i usually make to do this is sibling divs with position absolute:
<div id="page">
<div id="content">
TEXT here
</div>
<div id="back" style="position:absolute; opacity:0.5; left:0; top:0; width:100%; height: 100%; background-color:#000000;">
</div>
<div id="anotherText" style="position:absolute; width:100px; height: 100px">
TEXT
</div>
</div>
and so on....
OR:
Set a png background image on the parent div!
I know my question may look weird at first, but let me explain...
I have a div, named subcontainer which contains two elements :
Two icons and a link.
Basically, I want the div to make the two icons disappear on hover, BUT not my link. Here is my code :
<div class="subcontainer">
<img class="icons" src="images/arrow_right.png"/>
Follow me
<img class="icons" src="images/arrow_left.png"/>
</div>
**Edit : I want the icons to disappear on subcontainer:hover. Not on icons:hover.
If you have any questions to help me, just ask! :)
Use psuedo selectors:
View Here: http://jsfiddle.net/SinisterSystems/hajt6/3/
By doing it this way, you are telling it to only target the img elements that are children of the .subcontainer, but also allowing you to target the entire div without affecting the a element.
<div class="subcontainer">
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
Follow me
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
</div>
CSS
.subcontainer:hover > img {
transition: 0.2s;
opacity: 0;
}
If you want to make the image fade, use the following CSS:
.icons{
transition: all 0.5s; /*how long you want the fade to last*/
}
.icons:hover{
opacity:0;
}
Here's a fiddle: http://jsfiddle.net/74wPn/
EDIT: Revised to fit asker's comment's needs.
.icons{
transition: all 0.5s; /*how long you want the fade to last*/
}
.subcontainer:hover .icons{
opacity:0
}
Updated fiddle: http://jsfiddle.net/74wPn/1/
Do this way:
.icons:hover {
display: none;
}
If you want it to disappear instantly:
.icons:hover {
display: none;
}
If you want it to do it over a set time period:
.icons:hover {
transition: 0.2s;
opacity: 0;
}
You can use jquery.
$(".icons").hover(function(){
$(".icons").hide();
});
How can I edit my css to adjust the opacity on the background image in the hero unit without affecting the opacity of the text etc in the hero unit? Here is the draft site (yes i'll be paying for proper version of the photo): site
The easy answer is to take your .jpg, and create a .png with it that has your opacity already applied.
One way would be to move your hero text outside of the hero unit and use position:relative to place it where you want...
CSS
.hero-unit {
background-image:url('..');
height:300px;
opacity: .5;
}
h1 {
position: relative;
top: -350px;
left: 40px;
color:#fff;
}
HTML
<div class="container">
<div class="hero-unit">
</div>
<h1>Hello Hero Text</h1>
</div>
Demo on Bootply
This example assumes your hero text it contained in an H1, but it could be in any container outside of the hero.
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!
I want apply opacity for parent but I do not want the child element to inherit this opacity.
<div class="parent">
<div class="child"></div>
</div>
.parent {
opacity: 0.6;
}
Is there a way to "cancel" the inherited opacity? maybe force it to opacity=1for the child element?
The opacity of the child will always be the opacity of the parent if the opacity of the child is 1.
This is not a problem with inheritance, but rather with the way opacity is calculated.
For instance,
<div id="parent">
<div></div>
</div>
<div id="original">
</div>
<div id="quarter">
</div>
#parent div, #quarter {
width: 100px;
height: 100px;
background-color: orange;
}
#parent div {
opacity: 0.5;
}
#parent {
opacity: 0.5;
}
#quarter {
opacity: 0.25;
}
#quarter's opacity, from your perspective, is the same as that of #parent div, but in actual fact, #parent div has twice the opacity of #quarter. See this jsfiddle for more detail: http://jsfiddle.net/HUaNm/
The only way to avoid this is to move the child out of the parent. Alternatively, depending on what you want here, you can also use rgba colors for the background/border/font color of the parent instead of opacity, but the effect is not the same as applying opacity.
if you have parent background color - use RGBA,
if you have parent image - use additional RGBA layer between parent and child divs playing with css position.