I am using IE6 and the only occupicy thing i can thing that works is opacity: 0.5; filter: alpha(opacity = 50);
background-color:black;
opacity: 0.5;
filter: alpha(opacity = 50);
this works but it makes the text transparent as well how can I make only the background colour transparent
it's simple only you have do is to give
background: rgba(0,0,0,0.5)
& for IE use this filter
{background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */ zoom: 1;}
for more about color transparency in IE you have to read about hsla color:
http://greenevillage.net/csspages/hsla.aspx
You need to have a look at this trick here:
http://randaclay.com/tips-tools/how-to-make-your-backgrounds-transparent-using-css/
Related
This question already has answers here:
How do I give text or an image a transparent background using CSS?
(29 answers)
Closed 5 years ago.
I am want transparency a screen and show the screen behind
my css:
.correct-answer {
background-color: #98CB66;
filter: alpha(opacity=60);
z-index: 10;
opacity: 0.7;
height: 100%;
width: 100%;
}
i tried use alpha filter in css,
and its not working
if you just want to apply opacity to background-color then you could convert your hex to rgb and use it with alpha
background-color : rgba(152,203,102,0.6);
In another case, if you want to apply opacity to whole block, then use CSS3 filter property.
-webkit-filter: opacity(60%); /* Safari 6.0 - 9.0 */
filter : opacity(60%);
Try Below CSS Snipet :
.yourselector {
background:#000;
opacity: .75; /* standard: ff gt 1.5, opera, safari */
-ms-filter: “alpha(opacity=75)”; /* ie 8 */
filter: alpha(opacity=75); /* ie lt 7 */
-khtml-opacity: .75; /* safari 1.x */
-moz-opacity: .75; /* ff lt 1.5, netscape */
}
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;
}
I'm trying to incorporate thickbox on my site. Basically, it's just a fancy javascript alert with a lot more functionality. However, when you the thickbox appears it darkens the rest of the screen. Id rather not have this. I have searched the CSS file extensively and cannot find how to change the opacity/background color. Any help would be appreciated.
link to CSS file:
http://jquery.com/demo/thickbox/thickbox-code/thickbox.css
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
The "darkening of the screen" is caused by a black overlay with 75% opacity.
Change background-color to transparent if you do not want this.
It's this:
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
You can just empty the content or remove it altogether and problem is fixed!
#riku; you can use rgba for transparent color, like this
css:
.TB_overlayBG {
background: rgba(0,0,0,0.7)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */
}
Because rgba is not transparent it's content as opacity does
For more check THIS
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 */
What's the best way (if any) to make an image appear "grayed out" with CSS (i.e., without loading a separate, grayed out version of the image)?
My context is that I have rows in a table that all have buttons in the right most cell and some rows need to look lighter than others. So I can make the font lighter easily of course but I'd also like to make the images lighter without having to manage two versions of each image.
Does it have to be gray? You could just set the opacity of the image lower (to dull it). Alternatively, you could create a <div> overlay and set that to be gray (change the alpha to get the effect).
html:
<div id="wrapper">
<img id="myImage" src="something.jpg" />
</div>
css:
#myImage {
opacity: 0.4;
filter: alpha(opacity=40); /* msie */
}
/* or */
#wrapper {
opacity: 0.4;
filter: alpha(opacity=40); /* msie */
background-color: #000;
}
Use the CSS3 filter property:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
The browser support is pretty decent, https://caniuse.com/css-filters.
Your here:
<img src="img.jpg" />
Css Gray:
img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}
Ungray:
a:hover img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none ; /* IE6-9 */
zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
-webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
I found it at: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao
Edit: IE10+ does not support DX filters as IE9 and earlier have done, nor does it support a prefixed version of the greyscale filter.
You can fix it, use one in two solutions below:
Set IE10+ to render using IE9 standards mode using the following meta element in the head: <meta http-equiv="X-UA-Compatible" content="IE=9">
Use an SVG overlay in IE10 to accomplish the greyscaling internet explorer 10 - howto apply grayscale filter?
If you don't mind using a bit of JavaScript, jQuery's fadeTo() works nicely in every browser I've tried.
jQuery(selector).fadeTo(speed, opacity);
Better to support all the browsers:
img.lessOpacity {
opacity: 0.4;
filter: alpha(opacity=40);
zoom: 1; /* needed to trigger "hasLayout" in IE if no width or height is set */
}
To gray out:
“to achromatize.”
filter: grayscale(100%);
#keyframes achromatization {
0% {}
25% {}
75% {filter: grayscale(100%);}
100% {filter: grayscale(100%);}
}
p {
font-size: 5em;
color: yellow;
animation: achromatization 2s ease-out infinite alternate;
}
p:first-of-type {
background-color: dodgerblue;
}
<p>
⚡ Bzzzt!
</p>
<p>
⚡ Bzzzt!
</p>
“to fill with gray.”
filter: contrast(0%);
#keyframes gray-filling {
0% {}
25% {}
50% {filter: contrast(0%);}
60% {filter: contrast(0%);}
70% {filter: contrast(0%) brightness(0%) invert(100%);}
80% {filter: contrast(0%) brightness(0%) invert(100%);}
90% {filter: contrast(0%) brightness(0%);}
100% {filter: contrast(0%) brightness(0%);}
}
p {
font-size: 5em;
color: yellow;
animation: gray-filling 5s ease-out infinite alternate;
}
p:first-of-type {
background-color: dodgerblue;
}
<p>
⚡ Bzzzt!
</p>
<p>
⚡ Bzzzt!
</p>
Helpful notes
What's the difference between CSS3 filter grayscale and saturate?
https://www.w3.org/TR/filter-effects-1
Here's an example that let's you set the color of the background. If you don't want to use float, then you might need to set the width and height manually. But even that really depends on the surrounding CSS/HTML.
<style>
#color {
background-color: red;
float: left;
}#opacity {
opacity : 0.4;
filter: alpha(opacity=40);
}
</style>
<div id="color">
<div id="opacity">
<img src="image.jpg" />
</div>
</div>
You can use rgba() in css to define a color instead of rgb(). Like this:
style='background-color: rgba(128,128,128, 0.7);
Gives you the same color as rgb(128,128,128) but with a 70% opacity so the stuff behind only shows thru 30%. CSS3 but it's worked in most browsers since 2008. Sorry, no #rrggbb syntax that I know of. Play with the numbers - you can wash out with white, shadow out with gray, whatever you want to dilute with.
OK so you make a a rectangle in semi-transparent gray (or whatever color) and lay it on top of your image, maybe with position:absolute and a z-index higher than zero, and you put it just before your image and the default location for the rectangle will be the same upper-left corner of your image. Should work.
Considering filter:expression is a Microsoft extension to CSS, so it will only work in Internet Explorer. If you want to grey it out, I would recommend that you set it's opacity to 50% using a bit of javascript.
http://lyxus.net/mv would be a good place to start, because it discusses an opacity
script that works with Firefox, Safari, KHTML, Internet Explorer and CSS3 capable browsers.
You might also want to give it a grey border.