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 */
Related
I have some CSS that changes the background color when you highlight any text on the page:
*::selection {
background:#083875;
color:white;
}
*::-moz-selection {
background:#083875;
color:white;
}
The problem is that the background color of this text (on highlight) is slightly transparent. Is there any way to make the background completely solid using only css?
This issue is occurring in Opera 25.
In Opera 25, you can't control the opacity of the selection of text.
Even forcing the opacity using the rgba(0,0,0,1) produces a semi-transparent background.
*::selection {
background: rgba(255,0,0,1);
color:white;
opacity: 1;
}
http://jsfiddle.net/j9u9qx8x/1/
Test results in Opera 25
Perhaps try submitting a support ticket to the Opera development team to see if they can allow this functionality. It makes sense that you should be able to override the transparent effect by forcing the opacity in the rgba() color syntax.
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
}
What should be the workaround in order to show in pre-IE9 the following CSS:
background-color: hsla(182, 44%,76%,.5);
for transparent element you have more way.
for IE ->
filter: alpha(opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
/* above line works in IE6, IE7, and IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
/* above line is IE8 only */
and for all browsers:
opacity: .7;
But they are transparent all element , If you need transparent only any color for example background you must use 2 functions rgba or hsla and example for them:
support : (Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+)
#rgba {
background: rgba(98, 135, 167, .4);
}
but IE9 only support it in all version of IE and all browser support css3
#hsla {
background: hsla(207, 38%, 47%, .4);
}
You can use one of Microsoft's proprietary "filters" to do this:
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FA7DBDD,endColorstr=#7FA7DBDD);
zoom: 1;
The hex values are in ARGB order. So convert your color to a RGB Hex value, (#A7DBDD in this case) and put the opacity in front (0.5 is 7F in hex) like this: #7FA7DBDD
This would be best done, of course inside an IE specific stylesheet, perhaps using conditional comments.
Use a separate dom element with solid color and set the opacity ... it will work just fine :)
.bg {
background: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}
<style>
* {
background: red;
}
.blackbalk{
background:black;
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter:alpha(opacity=85);
-khtml-opacity:.85;
-moz-opacity:.85;
opacity:.85;
width: 985px;
margin: 0 auto;
height:255px;
color: white;
}
</style>
<div class="blackbalk">Text </div>
Now my text gets pink, why?
How can i get it white again?
Greetings
Edit: JS Fiddle to make it clear: http://jsfiddle.net/WFxbH/
You can do it by instead using an rgba background on your element:
Live Demo - this will work "in every browser you care about", and my jsFiddle includes the recommended IE conditional comment to make it also work in that browser.
.blackbalk {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.85);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000)";
}
Thew, opacity affects the entire element and its contents, not just the background color. If you just want the background color to be 85% black, you should specifiy it with an RGBA color, like so:
.blackbalk {
background: rgba(0, 0, 0, 0.85);
width: 985px;
margin: 0 auto;
height: 255px;
color: white;
}
EDIT: cant over ride the cascading of opacity. Best alternative in my pinion is to use a single pixel 85% opacity black png as the background image. option 2 would be to make the inner content actually outside of the div then position it over but that's a lot finickier. You can even get the transparent png to work in IE without much trouble.
IGNORE:Not positive, as I can't test it right now but I assume the text is becoming translucent with the opacity change. Perhaps if you put your text inside a span with background-color:none and color:white; it might work it out. May have to set the spans opacity to 100% to override.
Is there a way to control opacity/transparency of the border color using CSS?
You may try rgba color
border-color: rgb(255,255,255); /* fallback for IE */
border-color: rgba(255,255,255, 0.4); /* RGBA for the ones supporting it */
The last one is the (alpha) opacity.
But it's not supported in IE, that's why you need a fallback version
Try border: 5px solid rgba(255,0,0,0.5); -- the alpha channel is the last parameter.
NOTE: Not all browsers (read: Internet Explorer) support this.