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!
Related
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);
}
This question already has an answer here:
Left margin of Margin: auto-ed elements = to padding left of 100%-width overflow item
(1 answer)
Closed 7 years ago.
This is my fiddle: http://jsfiddle.net/o7pfjv3w/. I trying to give to the grid class a margin-left:10px and margin-right:10px; but a scrollbar shows up. How do i get rid of it ?
css code:
.main{width: 100%;border:1px solid black;overflow:auto;display:block;}
.grid{width:100%; margin-left:10px;margin-right:10px}
html code:
<div>
<div class="main">
<div class="grid"> <p>ppppppppppppppp pppppppppppppppppppppppppppppp ppppppppppppppppppppppp ppppppppppppppp</p>
</div>
</div>
</div>
Just change your overflow:auto; to overflow:hidden;
.main{
width: 100%;
border:1px solid black;
overflow:hidden; // not auto
display:block;
}
Here is the updated jsfiddle
This has both margin and width: 100%.
.grid{width:100%; margin-left:10px;margin-right:10px;}
You need to make sure you calculate it. So, instead, give padding and make the box-sizing to be border-box:
.grid{width:100%; padding-left:10px;padding-right:10px;box-sizing:border-box;}
Fiddle: http://jsfiddle.net/o7pfjv3w/1/
I tried a responsive css layout,but "top:50%" can't work and the "left:50%" can.
Why it happened?
<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
<div style="position:absolute;top:50%;left:50%;">
</div>
</div>
Define a dimension for the parent container, e.g. div:
<div style="border: 2px solid red;position:relative;top:0%;left:0%;height:200px;width:300px">
<div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
</div>
</div>
Or
Another way is to just stretch the parent container, i.e. div, by its top, bottom, left, and right properties. Like this:
<div style="border: 2px solid red;position: absolute;top: 0px;bottom: 0px;left:0px;right:0px;">
<div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
</div>
</div>
Consider your original HTML:
html, body {
height: 100%;
}
<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
<div style="position:absolute;top:50%;left:50%;">test</div>
</div>
The inner/child div has position: absolute, so it is out of the content flow of the parent element and will not contribute to the height or width of the parent element.
The parent div is in the content flow, but has no content, so its intrinsic
height would be zero. However, you specified height: 100%, but this will not do anything because the div has no height reference on which to base a computed value. So the computed height value for the parent div is zero.
As a result, the child element's top offset computes to 50% of zero,
so it is positioned at the top edge of the parent block.
You would need either to specify a height for the parent div or assign
html, body {height: 100%}
as this would allow the div to compute its height based on the height of the
body, which is based on the height of the html, which being 100%, takes that of the screen.
See the link below. I believe you're going to have a better result with Fixed for what it is you're trying to do, although I'm still not 100% sure I understand what that is.
http://jsfiddle.net/8q107wvb/1/
body {background:#e9e9e9; color:#202020;}
#wrapper {width:500px; background:#fff; margin:50% auto;}
.centered-content {position: fixed; top: 50%; left: 50%; background:#fff; padding:20px;}
This is another to solve this issue
* {
height: 100%;
}
.first{
position:relative;
top:0%;
left:0%;height:100%;
width:100%"
}
div{
position:absolute;
top:50%;
left:50%;
}
<div class="first">
<div style=>Check this</div>
</div>
This question already has answers here:
Position fixed element with percentage width relative to container
(2 answers)
Closed 8 years ago.
I would like to make one of column in my layout fixed. Unfortunately when I make it fixed it doesn't fit to parent div width. Is there any way to achieve that.
Html:
<div class="row" style="margin-left: 100px;">
<div class="col-sm-9">
</div>
<div class="col-sm-3">Content</div>
</div>
Css:
.col-sm-9 { background: red; color: white; }
.col-sm-3 { background: blue; color: white; position: fixed; right: 0; }
Here is jsfiddle that demonstrate my problem: http://jsfiddle.net/F5VmF/2/.
You should remove your position fixed from your .col-sm-3 div, and insert another div inside it with a position absolute. And whenever you scroll the page, you will change the top position of that div. Here is the example. And here is the code.
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!