I have two div's which looks like this
<div id="outer">
<div id="inner>
</div>
</div>
#outer {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
opacity:0.50;
}
The problem is that I get opacity and in the inner div. I know that I can put inner div outside the outer div, but this is not solution for me
Yeah that's because you are fading #outer and everything inside it.
If you are only trying to fade the background colour you have two options:
Use a transparent .gif as a background image.
use rgba. Rg. background-color: rgba(0, 0, 0, .6) is equals to Black with 60% opacity.
*EDIT*
Just realised it's for Internet Explorer 6, please be more clear next time.
In this case, rgba will not work, so give up on that.
You can still do so with transparent background image, but you'd need a jQuery plugin to make IE6 support .png images. Here's one http://jquery.andreaseberhard.de/pngFix/
Use rgba background colour to set opacity instead - your problem is just a standard css problem.
Related
I want to have a div that has an image inside, but with the div and background being completely transparent, giving the impression the image exists alone, with the elements behind the background of the div appearing.
I've tried using rgba in several ways, such as background: rgba(204, 204, 204, 0.5); but all of these end up leaving a white background on the div when set to total transparency.
How can I implement this?
EDIT
Here is a picture:
How can I make the red button appear as normal, but be able to see what is behind the white part?
My HTML is as such:
<div id="transparent-background">
<img src="./images/ui/chat.gif" class="arrow-button"/>
</div>
Thanks,
Just use this CSS for your DIV:
#transparent-background {
background: transparent;
}
I have a background image and a div that comes on top of that. I want the other div to be transparent (partially) so that I can still see the background below it with some opacity (if possible). I am new to CSS so any help would be great.
Thanks in advance.
Put this in the top div that you have.
background: rgba(0,0,0,0.5);
Use the css property opacity to set the level of transparency of the div in question. Example:
#transparent-div{
opacity:0.4;
}
The opacity property works on a scale between 0 and 1 with 1 being completely opaque and 0 being completely transparent.
I have a division that I gave a black background color. The body of the HTML is yellow. What I want is the first black div to fade out.
I wanted to do this using a background-image. The background image is a png file that is black as well, but has a transparency from 0% on the left and gradually goes to 100% on the right.
If I also add this background-image to my division, it remains black.
I understand why this happens, because the image is transparent, and behind that image is still the black color. I get that. Is there a way to do it though? Is there a way to disregard a background-color where a background-image is positioned?
I rather don't create extra html elements if it ain't necessary.
You should use the linear-gradient CSS function for your div.
background: linear-gradient(to right, black, white)
Basically I have a div that I want the background to be transparent.
<div id="modSideTop"><div id="modSideTopText">This Text Must Not Be Transparent</div></div>
The modSideTop div has a background image attached via css. What would the rest of the css that I need be to keep the text normal and the background transparent?
Thanks in Advance for your help!
Use an rgba color for the background rather than using opacity. For example, 50% translucent black:
background: rgba(0, 0, 0, 0.5);
Try it on JSFiddle.
Hi i am mentioning the property through which you can increase and decrease the opacity of background and that will not affect the text color its simple see the CSS basically you have to use the rgb color in background & alpa for opacity.
background:rgba(146,146,146,0.1);
or see the example:- http://jsfiddle.net/8LFLd/3/
I am creating a webpage that have a transparent div.
I want to add a non-transparent div inside that transparent div and I find that it is also transparent.
I try to set the div inside to opacity:1 but it doesn't work.
What should I do?
I found this somewhere while researching CSS3 and apologize that I cannot re-call where so as to credit the appropriate author.
But if you are looking for a semi-transparent background solid color on a div. Instead of setting the color and controlling transparency with opacity/alpha properties, set the background-color property directly using rgba(rrr,ggg,bbb,aaa) format. This will prevent any child elements from inheriting any transparency.
ex.
#mydiv { background-color: rgba(128,64,0,0.75); }
There are two ways that I know of to work around this:
Fake transparency on the containing div by using a transparent PNG as the background image.
Separate the divs so that they are side-by-side, and then use relative or absolute positioning to stack them.
This doesn't work in CSS unfortunately. In the past I've used positioning to push the non transparent div containing the content into the transparent div. I couldn't dig up some old code from my projects, but I did find this blog post:
Non-transparent elements inside transparent elements
use background, padding, background-origin to control the padding and z-index to control the position of the element. For example:
#mydiv{ background: white; padding:100px; background-origin:border-box; z-index:1}