Getting shadow text to work in IE
After finding a similar question on SO, I still am having problems. Here is my CSS:
.title {
position:absolute;
bg-color:#FF0000;
z-index:10;
width:100%;
开发者_StackOverflow社区 height:100%;
font-size:250%;
color: #FCD116;
text-shadow: 2px 2px 3px #555;
filter: dropshadow(color=#555, offx=1, offy=1);
zoom:1
}
In Google Chrome, the shadow is only offset by about 2 pixels. This is exactly what I want. In IE, however, the shadows are super far away (relative to what I want) and chunky. I've set the offx and offy to one. Why isn't this working? I've never used this method before, I just found it now while looking at the suggestions on SO with my title.
AS A SIDE NOTE
While I am asking, does anybody know how to get IE to let me do transparent images? I tried to put a semi transparent image (a button with a drop shadow) but the shadow is dark black and it gives the appearance that the quality has been compromised. I'll award points for this question (if answered) :)
Main issue - you need to use a full 6-character HEX value - i.e. #555555 - inside the filter.
Side issue - personally I've found Drew Diller's belated_png script to be a quick and reliable solution. Drop in the script, and apply a png_bg class to anything you want to have alpha transparency.
PS - http://jsfiddle.net/peXwY/
.title {
position:absolute;
bg-color:#FF0000;
z-index:10;
width:100%;
height:100%;
font-size:250%;
color: #FCD116;
text-shadow: 2px 2px 3px #555;
Filter: DropShadow(Color=#555555, OffX=2, OffY=2, Positive=1);
zoom:1
}
Here's some good information for your side note... Also, take a look at the "sleight" reference towards the bottom: http://24ways.org/2007/supersleight-transparent-png-in-ie6
As for the main issue, considering messing with the z-index of .title. I recall having issues with it in IE several months ago, and it was because of the way IE was ordering the vertical objects on the page.
精彩评论