I have been searching for answers for a couple of days and I found the answer awhile ago but it's not really what I want to get. The PNG backgrounds worked for IE8 and above. In IE6, it does not work. So I used this:
#nav_bar {
*background:none;
*width: 34px;
*height: 151px;
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='../img/bg_navbar2.png');
I got a 100% transparent background but I want it only a 50% opacity. How do I tweak that line? Thanks for the help! I DON'T WANT TO USE JAVASCRIPT FOR THIS. I want a CSS3 semi-transparent background :)
IMAGES:
image in PS:
https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash3/431809_10200713326188890_673360556_n.jpg
actual background image in browsers [EXCEPT IE6]:
https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/575657_10200713331029011_963068431_n.jpg
Looks like you just need to add the Opacity. For example:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
I'd recommend using conditional HTML to call a stylesheet just for IE6. Stars are not to be trusted!
Related
Firefox is creating small lines on the triangles I've created and rotated.
Chrome
FireFox
I've looked into what other questions have done and they recommended trying adding transform: translateZ(1px) rotate(-45deg); and background-clip: padding-box; but neither of those worked for me.
Also, it is only the rotated triangles that have the line in the firefox browser.
The page can be viewed at bingo-caller.herokuapp.com
I tried on your page and it seems to work, add translateZ(1px) to the transform for the triangles.
try this hack on the masked element: filter: blur(0.01px);
Until now desc 2022 that still haven
I fix using border with color depending to the background and can not use transparent of border color e.g I use white because my parent background is white
border: 1px solid white;
I didn't found a solution for that problem. It seems possible if you use svgs with grayscale filters but is there an easy way to do this with css only?
Update:
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
and
-webkit-filter: grayscale(0);
filter: grayscale(0%);
Works for newest Firefox and Chrome versions.
If you have managed to set the background image data with a base64 string then just do it again for :hover with black and white data.
May you wrap the image into an div.
Then hide an show the image. And change the color of the div.
example for the css:
http://www.w3schools.com/cssref/sel_hover.asp
here the working example, hope it is what you want:
https://jsfiddle.net/3v4on7cv/
#testDiv:hover > img
is the needed css selector, it will select all parent images of the hovered element with id "testDiv"
I'm using DD roundies on a list element (li) that also has a filter applied for gradient and the rounded corners dont appear, but if I remove the gradient the rounded corners appear. Is there something I can do to fix this or is this a known limitation with roundies?
#hero-tabs li {
display:block;
float:left;
width:279px;
/*height:100px;*/
font-size:11px;
line-height: 1.3;
color:#fff;
border-left:1px solid #ccc;
cursor:pointer;
background-color:#555;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#222222, endColorstr=#666666);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#666666')";
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#222));
background-image: -moz-linear-gradient(100% 100% 90deg, #666, #222);
}
DD_roundies.addRule('#hero-tabs .first-tab', '0 0 0 5px');
Thanks
I have ound this also and there appears to be no work around at present. You can have one or the other, not both.
IE applies the gradient filter to the original element so the rounded elements from dd_roundies don't cover it.
It's not a limitation with roundies, it's a limitation with filter gradients. This is proved by the fact that filter gradients also cause similar problems in IE9 with standard border-radius corners.
There is no easy work-around available; the best solution is simply not to use those filter gradients in older versions of IE; so IE8 and earlier would just a fall-back solid colour background.
IE9 does have a work-around, as it can use an SVG image with a gradient as the background embedded in the CSS as a data-URL. It's a bit clunky, but it does work. IE8 doesn't have this option though.
If you must use gradients in IE8, you're pretty much forced to stick with the filter styles, and live with the bugs.
There is one other option though -- CSS3Pie. This is a small JS library similar to DD_Roundies in that it adds border-radius support to old IE versions. But in addition, it also does gradients. My advice, therefore would be to use CSS3Pie instead of DD_Roundies, and it will deal with both issues for you at once.
Hope that helps.
I only want the background color of white in my div to be translucent roughly 50%. The content should be fully opaque. What's the proper way to do this? I imagined when I looked up the background CSS property, I'd find an opacity setting, but didn't. Don't care about IE6.
UPDATE: solving with the rgba solution given below in conjunction with CSS3PIE's solution for getting rgba to work in IE browsers.
You can use the background-color: rgba() notation:
#theIdofYourElement,
.classOfElements {
background-color: #fff;
background-color: rgba(255,255,255,0.5);
}
Edited to add the default background-color (for browsers that don't understand the rgba() notation). Albeit I was under the impression that all but IE do understand it (but I could be wrong, and haven't tested to be sure...).
Edit with thanks to #akamike.
Edited to address question from OP (in comments):
which browsers don't understand rgba? will they all in the future, is this part of css3?
The best information I could find is the CSS Tricks' rgba() browser support table, with a link to a demo and 'more complete' compatibility table.
If you want cross-browser opacity, you can handle each within your css definition
div
{
opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
filter: alpha(opacity=50); /* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
-khtml-opacity: .50; /* Safari 1.x */
-moz-opacity: .50; /* FF lt 1.5, Netscape */
}
There is a CSS property called backdrop-filter providing real translucency (as opposed to transparency, which is already available in CSS).
Currently supported by all modern browsers.
.my-selector {
backdrop-filter: blur(5px);
}
More about the selector
Browser support
Easiest way is to create a semi-transparent PNG and just use that as your background image for the div.
If you're using Photoshop (or similar tools) just create a 10px by 10px image that is all white -- then drag the opacity slider down to 50%. Save it as a PNG and you should be rockin'!
Using RGBA is also a possibility, but you're not just losing IE6 then -- there are still quite a few people using browsers that don't support the alpha scheme.
i'm trying to add alpha effect for my image. the image is in rounded corner rectangular shape. i know there is attributes to change the alpha in CSS3, but i'm trying to be compliant with the w3c standard, which is still CSS2.
Sorry i didn't state my question correctly ealier. i was trying to change the alpha when i hover over the image using CSS2. i'm thinking to use the "background-image" for 100% alpha, and use the img tag for the 50% alpha. is there any better way to do this?
If the image is a PNG, you can include alpha directly in the image. Of course this would require the PNG Fix script for IE6.
Otherwise, you can use CSS to set the transparency.
Edit: Updated to only work on hover, note that this won't work in IE6.
img.transparent{
filter: alpha(opacity=100); /* internet explorer */
opacity: 1; /* fx, safari, opera, chrome */
}
img.transparent:hover {
filter: alpha(opacity=50); /* internet explorer */
opacity: 0.5; /* fx, safari, opera, chrome */
}
The typical way a web developer implements the transparent effects is using a partially transparent PNG file as a background.
div {
background: #FFF url(img/bg.png) repeat top left;
}
Using the png will work as you would expect, however opacity doesn't work as expected:
div {
filter: alpha(opacity=50); /* IE */
-moz-opacity: 0.5; /* Firefox */
-webkit-opacity: 0.5; /* Older Safari, Webkit */
opacity: 0.5; /* CSS Standard - Always last in the list */
}
This will make DIV 50% transparent, including all of its children, text and all. You will really need to play around with the opacity settings to make sure you get results as you would expect.
An even simpler fix, if you can stand a slightly worse user experience for IE6, is to use an alpha-transparent image for all modern browsers, and send an image with no transparency (or just one-color) to IE6. Looks a little worse for those few users, but is a lot less code to maintain.