css - stop inheritance of opacity - css

I have div with opacity:0.80; property that contain text and button. The problem is that button and text also inheritance opacity from div. How to fix it?
I already tried to add opacity:1; to button and text <p> tag, but it does not helps.

I think you want the opacity on the background instead. As Prisoner said, not supported by old browsers.
background-color: rgba(0, 0, 0, 0.8);
w3schools: RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.

you can't fixed it.Child elements also getting parent opacity
One solution is using rgba:
USE :after pseudo element
element:hover:after {
background-color: rgba(0, 0, 0, 0.1); // black with opacity 0.1
}

Related

How to solve linear gradiant css issue in Safari Browser?

I have used the css properties like
background:linear-gradient(top, rgba(0, 0, 0, 0.81) 0%, rgba(0, 0, 0, 0.68)100%),url(http://localhost/project/assets/uploads/bannerpages/74.jpeg);
But in safari browser linear gradiant property is not working at all.
Another property Of Height VH is also not working in safari .
.hero-video-caption {
height: 96vh!important;
}
What is possible solution for this two properties in safari browser

CSS Opacity Box

Alright So here is my CSS style sheet.
#mainheader,#content{
opacity:0.35;
text-align:center;
background-color:#000000;
border-top-style:ridge;
border-left-style:ridge;
border-right-style:ridge;
border-bottom-style:ridge;
}
And as you can see it's a box that's see through, but has a small black background making text look fuzzy. Example.
http://i.stack.imgur.com/18dOZ.png
When I take away that background color I get more clear text like this...
http://i.stack.imgur.com/ixLva.png
Alright So what i'm trying to say it what can I write to have that text above that box being very clear text and not with it's dark opacity.
If you want to use CSS3, try:
background-color: rgba(0,0,0,0.35);
instead of opacity.
http://jsfiddle.net/vsZtM/
References from W3.org about RGBA:
http://www.w3.org/TR/2003/CR-css3-color-20030514/#rgba-color
http://www.w3.org/wiki/CSS3/Color/RGBA
Instead of opacity, change background of containers with an alpha channel:
#mainheader,#content {
background: rgba(0,0,0,0.35);
}
Where last param is the opacity.
Opacity changes the opacity for the entire element, while background:rgba(0,0,0,.35) will change only the background color.
You should try using rgba instead of opacity like so:
background-color: rgba(0,0,0,0.35);
Note: this is CSS3 and will only work in IE9 and up, so for other versions you should provide a fallback like so:
background-color: #000;
background-color: rgba(0,0,0,0.35);
You can set the background-color as an rgba value, and leave off the opacity in your CSS statement. For example:
#mainheader,#content{
text-align:center;
background-color: rgba(0, 0, 0, .35);
border-top-style:ridge;
border-left-style:ridge;
border-right-style:ridge;
border-bottom-style:ridge;
}
This will let your text stay fully opaque, while your background is semi-transparent. As a note, however, this will not work in Internet Explorer 8 and below -- it will be a solid background.

Transparent Background in Internet Explorer

I set a transparent background in a div element. It's child element don't have a transparent background.
I have:
background: rgba(181, 182, 183, 0.6);
For IE, i tried below:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B5B6B700, endColorstr=#B5B6B700);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B5B6B700, endColorstr=#B5B6B700)";
What would be the correct hex value? Im not sure on the last two digits.
Try #MatTheCat's answer here for an IE transparent background fallback: CSS background opacity with rgba not working in IE 8
Looking at your current code, if you are having trouble getting the background to be transparent, you may need to add zoom: 1 in order to trigger hasLayout in IE.
Try this:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B5B6B700,endColorstr=#B5B6B7000);
zoom: 1;
More info on hasLayout.

How to remove webkit tap highlight border only?

If you don't like webkit to highlighting links when tapping them, you can remove that effect with:
-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
Actually I want this effect, but not the extra border added around the tapped element.
Is there a way to remove highlight border only?
If you are talking about that orange borders around inputs on focus, you might want to try to add outline:none; to your CSS properties.
Like so :
input { outline:none; }
a is missing
should be -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

CSS transparancy question

I have got ot the following css to make my table cell's background transparent
background-color:black;
filter: alpha(opacity = 20);
the problem is, this transparency also makes the text transparent. How can i make it only target the background. or how can i over ride it when in my <span>. I've tired setting the occupicy to 100 in my <span>s for text but it doesnt override it. the text still comes out transparent
EDIT: I'm using IE6
You want to use rgba color which lets you set the alpha transparency of the color:
background-color: rgba(0,0,0,0.2); /* == black 20% opacity */
Read about rgba here: http://css-tricks.com/rgba-browser-support/
You can use filter for IE, code for all browsers would be:
background-color: #000000;
background-color: rgba(0, 0, 0, 0.2); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33000000',EndColorStr='#33000000'); /* IE6–IE9 */

Resources