CSS element opacity that does not affect transparency of its contents - html

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.

Related

How to apply an opacity filter to a cover [duplicate]

I have a paragraph element inside a div. The div has an opacity of 0.3 & the paragraph has an opacity of 1.
When I show the elements, it appears the paragraph is transparent, like it has an opacity of 0.3.
Is there a way to make the paragraph inside the div have full opacity? Maybe I can set a CSS value for this?
<div style="opacity: 0.3; background-color: red;">
<p style="opacity: 1;">abcde</p>
</div>
You can't, the opacity level is relative to the parent's opacity, always. So 1.0 inside 0.3 would be 100% of 0.3, which is 0.3, and 0.5 inside 0.3 would be 50% of 0.3 which is 0.15. If you're only using opacity for the background color, you can specify the color using the RGBA method so that the red will be opaque and not the content (and thus the paragraph inside it).
<div style="background-color: rgba(255, 0, 0, 0.3);">
<p>abcde</p>
</div>
See here.
I wanted to add this as a comment to animuson answer, but I can't post comments yet, so I'll just post it as an 'answer'. RGBa works great, but only in new browsers. Even IE8 doesn't support it, which is a serious setback, since many, MANY people still use IE8.
.color-block {
/* The Fallback Color */
background: rgb(200, 54, 54);
/* The Important Bit - Alpha Transparency */
background: rgba(200, 54, 54, 0.5);
}
Please read http://css-tricks.com/examples/RGBaSupport/ for more info.
I usually circumvent the problem entirely by using two divs. The first for the transparant background and the second for the content, positioned right over the first one. It's not neat, it's not nice, and I can't claim I'm happy with it, but... it even works in IE7 and IE6.
It's unfortunate that this doesn't work as you might expect. Other styles have a value for inherit - so why doesn't opacity?
There is a work-around if you're not doing anything too complicated:
Create a parent DIV (or other block element) with the width/height
you need and position:relative.
Create a child DIV with your transparency value, a width/height of
100% and position:absolute (possibly left/top:0 as well)
Create another child DIV with your content and the opacity set to
whatever you want.
Example:
<div style="width:200px;height:100px;position:relative">
<div style="opacity:.03;background-color:blue;width:100%;height:100%;position:absolute;left:0;top:0"></div>
<div style="opacity:.09">This is my content</div>
</div>
it's simple only you have do is to give
background: rgba(255,0,0,0.3)
& for IE use this filter
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000,endColorstr=#4CFF0000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000,endColorstr=#4CFF0000); /* IE6 & 7 */
zoom: 1;
Check this example for more
http://jsfiddle.net/epmcM/
you can generate your rgba filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

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.

Caption content's opacity not setting to 1 on slide [duplicate]

I have a paragraph element inside a div. The div has an opacity of 0.3 & the paragraph has an opacity of 1.
When I show the elements, it appears the paragraph is transparent, like it has an opacity of 0.3.
Is there a way to make the paragraph inside the div have full opacity? Maybe I can set a CSS value for this?
<div style="opacity: 0.3; background-color: red;">
<p style="opacity: 1;">abcde</p>
</div>
You can't, the opacity level is relative to the parent's opacity, always. So 1.0 inside 0.3 would be 100% of 0.3, which is 0.3, and 0.5 inside 0.3 would be 50% of 0.3 which is 0.15. If you're only using opacity for the background color, you can specify the color using the RGBA method so that the red will be opaque and not the content (and thus the paragraph inside it).
<div style="background-color: rgba(255, 0, 0, 0.3);">
<p>abcde</p>
</div>
See here.
I wanted to add this as a comment to animuson answer, but I can't post comments yet, so I'll just post it as an 'answer'. RGBa works great, but only in new browsers. Even IE8 doesn't support it, which is a serious setback, since many, MANY people still use IE8.
.color-block {
/* The Fallback Color */
background: rgb(200, 54, 54);
/* The Important Bit - Alpha Transparency */
background: rgba(200, 54, 54, 0.5);
}
Please read http://css-tricks.com/examples/RGBaSupport/ for more info.
I usually circumvent the problem entirely by using two divs. The first for the transparant background and the second for the content, positioned right over the first one. It's not neat, it's not nice, and I can't claim I'm happy with it, but... it even works in IE7 and IE6.
It's unfortunate that this doesn't work as you might expect. Other styles have a value for inherit - so why doesn't opacity?
There is a work-around if you're not doing anything too complicated:
Create a parent DIV (or other block element) with the width/height
you need and position:relative.
Create a child DIV with your transparency value, a width/height of
100% and position:absolute (possibly left/top:0 as well)
Create another child DIV with your content and the opacity set to
whatever you want.
Example:
<div style="width:200px;height:100px;position:relative">
<div style="opacity:.03;background-color:blue;width:100%;height:100%;position:absolute;left:0;top:0"></div>
<div style="opacity:.09">This is my content</div>
</div>
it's simple only you have do is to give
background: rgba(255,0,0,0.3)
& for IE use this filter
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000,endColorstr=#4CFF0000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000,endColorstr=#4CFF0000); /* IE6 & 7 */
zoom: 1;
Check this example for more
http://jsfiddle.net/epmcM/
you can generate your rgba filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

Layer one DIV over another to provide a transparent background with strong text

What I want to do is have a div with a transparent background that doesn't affect the text. Consider the following HTML:
<section class="content">
<header>
<h1>Description</h1>
</header>
Code
</section>
If I were to give it the following CSS:
background-color: #7ac0da;
opacity: 0.5;
filter: alpha(opacity=50);
The text would suffer from the transparency of the section. So, I started trying to layer the content like this:
<div class="code-sample">
<div class="background"></div>
<section class="content">
<header>
<h1>Description</h1>
</header>
Code
</section>
</div>
However, with an enumerable number of iterations I'm unable to get the section to layer over the div. I'll be honest, I've tried positioning the inner div and section absolute and relative. I've tried using the z-index. But really, I'm just shooting in the dark here. I'd like the .background to have a transparent look:
background-color: #7ac0da;
opacity: 0.5;
filter: alpha(opacity=50);
but yet the .content then overlay that div. This will allow me to then float the .code-sample div and do like a three-column layout with those.
How can I achieve what I'm looking for?
Use RGB color to only set the transparency for the background:
.class {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Source
No need for the extra background div, use RGBA values on .section to get a semi-transparent background which doesn't affect child elements
.content {
background: rgba(0, 0, 0, 0.2)
}
Using RGBa sometimes gives rough edges in texts in Firefox. So it may be better in some cases to use semi-transparent png as background (may use data-uri).

z-index and opacity issues

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.