z-index and opacity issues - html

I'm trying to make a wrapper at the back off all of my DIV's that will appear transparent (opacity: 0.6), but everything in front of that is appearing transparent too.
Any ideas how to fix this?
You can find the example here: http://testing.squaretise.com/ (I have given the wrapper (#wrap) a red border so you can interpret easier)

Use instead of:
opacity: 0.6;
this:
background: rgba(255, 255, 255, 0.6);
The color is in RGB and the last digits are for the transparency level.

You'll need to position your transparent div absolutely.
http://www.w3.org/TR/css3-color/#transparency explains how the descendants pick up the transparency.

Opacity is inherited. If the parent is see through, so are the children.
A better way to do this is to remove opacity and set the background color to be transparent:
.foo {
background: rgba(0,0,0,.5);
}

You should use transparent background, instead of opacity.
Background-image is the best way if you want to support IE8. (CSS3 Colours: http://caniuse.com/#search=rgba)
Use data-uri for better performance.

You could even do it with opacity. Here's an example:
HTML
<div id="wrapper">
<div id="contentOrWhatever">
</div>
</div>
CSS
body {
z-index:0;
}
#wrapper {
z-index:1;
opacity:0.6;
}
#contentOrWhatever {
z-index:99;
opacity:1;
}
So #wrapper ist now transparent and is ALWAYS behind #contentOrWhatever.
Hope I could help you.

Related

Change one of the bootstrap's background transparency without affecting text

I made a div with a background, in this case bg-secondary, I want to set the background's transparency to 0.6, however, I don't want to make the text inside of the div more transparent, only the background
I tried to override the bootstrap setup making a css style called bg-secondary with an opacity of 0.6 but it also makes the text more transparent and I don't want that, I just want the background more transparent
My div:
<div class="text-light bg-secondary">
<h3>hi</h3>
<h5>lorem ipsum<br></h5>
</div>
Style
<style>
.bg-secondary {
opacity: 0.6;
}
</style>
Sorry for such basic question but I am getting really confused.
Opacity will affect the children of the selected element...instead use rgba colors to set translucent backgrounds.
Example:
Instead of this:
.bg-secondary {
background-color: #000;
opacity: 0.6;
}
Try this:
.bg-secondary {
background-color: rgba(0, 0, 0, 0.6);
}
Yes, use css rgba(red, green, blue, opacity) to set opacity exclusively on the parent element's background property.
But note that Bootstrap v4 sets css:
.bg-secondary {
background-color: #6c757d!important;
}
Also, because hexadecimal rgba() is still lacking comprehensive browser support, it's advisable to convert hexadecimal #6c757d into it's decimal equivalent. In your case the Bootstrap override would be:
.bg-secondary {
background-color: rgba(108, 117, 125, 0.6) !important;
}
For your style to override bootstrap's style definition, you must define it after the bootstrap stylesheet and use the !important post-fix as well.
Here's a working fiddle.

CSS: Setting background opacity without rgba

In the following code, I want to set the opacity only for the background color of the li (not the text). However, it is important NOT to use the rgba for the background.
I'm trying following, but it sets the opacity for the link text as well.
HTML:
<ul>
<li>Hello World</li>
</ul>
CSS:
body{
background: red;
}
ul{
margin: 100px;
}
li{
padding: 10px;
background: #000000;
opacity: 0.1;
}
a{
color: #fff;
font-weight: 700;
opacity: 1;
}
JSFiddle:
http://jsfiddle.net/2uJhL/
Old question, but new answer! :)
Fortunately, the new versions of Chrome and Firefox support 8 digit colors. That's really cool, especially when you're developing and testing software.
For example:
background-color: #ff0000; (Red)
If you want a opacity of 0.5, you can do this:
background-color: #ff00007f (The 7F is half of FF)
So, from now on you won't need to use the rgba() if you don't want or have the entire div fade away - because of the opacity: 0.x - when you only want the background color a little bit transparent.
But remember that not all browsers support that. So, please test the snippet below on Chrome or Firefox, ok?
Isn't that cool???
<div style="background-color: #ff00003f;">better than [opacity: 0.25]</div>
<div style="background-color: #ff00007f;">better than [opacity: 0.50]</div>
<div style="background-color: #ff0000bf;">better than [opacity: 0.75]</div>
<div style="background-color: #ff0000ff;">better than [opacity: 1.00]</div>
Source: https://css-tricks.com/8-digit-hex-codes/
You can set a PNG or GIF image as background, i.e:
li {
background-image: url('path/to/your/image.png');
}
The opacity is applied at the content and all children. You can't set a different opacity for the children.
However if you don't want to use rgba you can use a png with opacity that you want.
And setting a png to your li in the background is the best solution in this case
tl;dr Cmiiw, you can't setting the background opacity without RGBA
Let me try to give another solution.
This solution is not the real answer for the problem, but it may helps.
For me, you just need to convert the background color (hex value) to RGBA, using tools something like this https://cssgenerator.org/rgba-and-hex-color-generator.html.
Then, just use the RGBA value in your background color.

Transparent Form Background HTML

So I'm using this form from this site here
When I post the form in my website the entire form area is white background. Yet I keep looking through the code and I don't see anything specifying the color. Is there a way to make it so that it has an opacity of 0 or anything of the like? Thanks in advance.
Use this css rule:
#my_form
{
background-color: transparent;
}
Background color is the answer as previously posted by dotoree however as a side tip, use this CSS class to change the opacity of a div.
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
I would go with a rgba value for the background color.
background: rgba(255,255,255,0.5); - white with a 50% transparency.

CSS Opacity Property

Hi i am using CSS Opacity Property for a div tag and it works well but the problem is when I write some text or paste images on that div tag they also become fade. I just need div back color to be fade and not the div content. My code is ...
#fade div
{
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
width:750px;
height:150px;
background-color:#FFFFFF;
}
#text in fade div
{
font-weight:bold;
color:#8A2BE2;
}
Thankyou !!!
It's much easier to use rgba() or a transparent PNG for the background.
rgba(0, 0, 0, .1);
rgba(0, 0, 0); //fallback
You can use rgba() property for this:
write like this:
#fade div
{
background-color: rgba(0,0,0,0.1);
width:750px;
height:150px;
background-color:#FFFFFF;
}
For IE you can use IE filter
background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); /* IE6 & 7 */ zoom: 1;
You can generate your filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
Just use 1px semi transparent gif and repeat it by x and y. As far as I know it is the most easy way to set semi transparent background.
Ofcourse the opacity applies to the child elements as well.What you can do is to segragate your markup.
<div id='Div-With-Opacity-set'>
</div>
<div id='Child-Elements-for-the-above-div'>
</div>
Align your markup carefully such that the markup resembles what you want.
Why don't you reset the opacity then?
#text in fade div
{
font-weight:bold;
color:#8A2BE2;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
Your best bet without CSS3 is probably to create a div and put another div positioned on top of it, but not nested inside of it. Opacity filters down to ALL elements inside of the element with the opacity set.
If you put a div immediately to the right, and then gave it a margin of -750px;, you could give it an opacity of 1, but the div behind it could have an opacity of 0.1, and this would work fine.
With CSS3 you could do this:
#fade
{
width:750px;
height:150px;
background-color: rgba(255,255,255,0.1);
}
and just the background would be 0.1 opacity. The text would still be 1.
What I personally do most often though, is I create a small .png with the transparent background that I want, and then I set that .png as the background of an element. In photoshop I could set the opacity of the white background to 0.1, then save a 50X50 square, and then I've got nearly perfect transparency (no IE6).
something like http://jsfiddle.net/PWM5f/ you need

CSS element opacity that does not affect transparency of its contents

I'm trying to create a <div> that has an opacity of 60%. I want the content of that <div> to be clear and not transparent.
The <div> with the class white_bg should have a white background color with 60% transparency, but the text and the image inside that <div> should be clear and not transparent at all.
Is that possible?
Please note that the text in the paragraph with the class main_content will be dynamic and the height will always change, so I can't just set a width and a height for the white_bg class and use position absolute and place it right behind the paragraph.
HTML
<div class="white_bg">
<h1 class="main_titles">Toon Boom Animate</h1>
<h6 class="subtitles">The Most Reliable Flash Animator Companion</h6>
<p class="main_content">
<img class="floatright" src="images/images.jpg" alt="" />
text comes here
</p>
</div>
You can use css3's rgba() to set the background colour with an alpha value, and then use a transparent png for IE.
You'd better use semitransparent png as a background.
either the semi-trans png as fantactuka mentions, or use position to place non-transparent content over your transparent div a la this blog post:
http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
I am putting code for chrome , FF and IE.. the first code though works on ie9 and above but the second one is for below ei9
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
Use a semi transparent image, or apply this css to your element:
.white_bg {
background-color: rgba(255, 255, 255, 0.5);
}
For you white_bg class use this:
.white_bg
{
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
Between those four properties, your bases should be pretty well covered for any major browser.