Internet Explorer 8显示渐变而不是背景图像 [英] Internet Explorer 8 shows gradient instead of background image
问题描述
我有一个奇怪的错误。我在一个DIV中平铺了一个半透明的1x1像素的黄色, http://jsfiddle.net/jUVfS/
您的 .png
图片需要有较大的尺寸,最小 1x2
而不是 1x1
。
请参阅: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
Internet Explorer 8不执行
重复1x1像素
半透明背景图像
正确当
页面上的任何其他元素使用-ms-filter
drective作为alpha透明度。
I have a weird error. I'm tiling a semi-transparent 1x1 pixel yellow PNG image in a DIV that overlays some text. With normal browsers, everything looks like it should. There's some text and a yellow, semi-transparent overlay above it.
In Internet Explorer 8 however, instead of tiling the 1x1 PNG image, a gradient (!) is displayed.
The CSS is rather simple:
.edit_section_overlay {
position: absolute;
z-index: 150;
top: -6px;
bottom: -6px;
left: -6px;
right: -6px;
border: 1px solid #afad9d;
background: url('../../images/content/edit/section/overlay/background-color.png') repeat;
min-height: 34px;
cursor: move;
}
I've never seen a bug like this before and Google doesn't help me…
Here's a demo in jsFiddle, http://jsfiddle.net/jUVfS/
Your .png
image needs to have larger dimensions, at minimum 1x2
instead of 1x1
.
See: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
Internet Explorer 8 doesn't perform the repeat of a 1x1 pixel semi-transparent background image correctly when any other element on the page is using the "-ms-filter" drective for the alpha transparency.
这篇关于Internet Explorer 8显示渐变而不是背景图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!