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 */
}
Related
<style>
.imgopacity{
opacity:0.2px;
}
</style>
In the above CSS code, the opacity property is not supported, how to obtaining the opacity property if anyhow i want to have one.
Opacity property is not measured in pixels . its a ratio from 0 to 1 to indicate the transparency of an element so your code should be :
<style>
.imgopacity
{
opacity:0.2;
}
</style>
Try:
.imgopacity {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
/* IE 5-7 */
filter: alpha(opacity=20);
/* Old Mozilla */
-moz-opacity: 0.2;
/* Safari 1.x */
-khtml-opacity: 0.2;
/* Compliant browsers */
opacity: 0.2;
}
.imgopacity {
opacity:0.2;
}
Simply remove that px from your CSS code. The opacity property does not take value in pixels. It can take a value from 0.0 to 1.0. The lower the value, the more transparent the image will be. For browsers like IE8 and earlier use filter:alpha(opacity=x), where x is a value from 0 to 100.
What is the solution for rgba value and border radius value of 0.0 in IE8.
The error i get is
Value "rgba(250, 250, 250, .6)" is not supported. (8.0)
Property "-webkit-border-radius" is not supported. (8.0)
Option 1
http://jquery.malsup.com/corner/
Option 2
http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip
Option 3
http://css3pie.com/
Option 4
http://www.netzgesta.de/corner/
Option 5
See this question
EDIT: Option 6
https://code.google.com/p/jquerycurvycorners/ - border-radius.
For rgba you can try create .png image with opacity and sat him as background
or try
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
I have a css property for a disabled button as follows.
.btn-disabled {
pointer-events: none;
cursor: default;
color:#cecece !Important;
-webkit-filter: opacity(50%)
}
I get the needed effect in chrome, but not in firefox. Is there a way to achieve the same in firefox,chrome,saffari through the same css properties?
You need use prefix for firefox -moz-, this is for all browsers:
.btn-disabled {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape - firefox */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
pointer-events: none;
cursor: default;
}
You can see that here.
Vendor prefixed properties are experimental features in specific browser engines.
Firefox is built around Gecko, not Webkit, so experimental Webkit features will not work in it.
Avoid using vendor prefixed properties on the open web (unless you are writing sites where the point is to experiment instead of being robust).
Firefox has supported the non-prefixed version for quite some time.
If you really want decent browser support, use the opacity property instead. It has support back to Firefox 1.
simply use firefox -moz- prefix,
.btn-disabled{
pointer-events: none;
cursor: default;
color:#cecece !Important;
-webkit-filter: opacity(50%);
-moz-filter: opacity(50%);
filter: opacity(50%);
}
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 am trying this code:
<div id ="crop_image">
<img class="one" src="http://www.dreamincode.net/forums/uploads/monthly_05_2010/post-380028-12747928967239.jpg.pagespeed.ce.yRppR_j7ae.jpg" />
</div>
#crop_image:not(.one) {
width: 100%;
height: 100%;
background-color: red;
filter: alpha(opacity=20); /* internet explorer */
-khtml-opacity: 0.2; /* khtml, old safari */
-moz-opacity: 0.2; /* mozilla, netscape */
opacity: 0.2; /* fx, safari, opera */
}
However, the img still have opacity. What is wrong ?
demo
Mixing a few tricks (inline-block, absolute positioning, etc.) you can get a semi-transparent div to overlay an image.
demo
you can try this...(revised)
#crop_image img:not(.one)
I'm not sure what you're trying to do there, but I can explain why it is setting the opactiy to .2.
#crop_image:not(.one) means an element with the ID of crop_image which does not have the class of one. If you look at your crop_image it does not itself have the class of one so this will match. The crop_image contains an element which has the class of .one, but that is not what not does.