2

我正在尝试制作一条灰线，它逐渐变透明。我创建了一个 1x100px 的 div，并添加了 css 渐变来制作淡入淡出效果。

它工作正常，除了在 IE 中 div 有一个蓝色边框，我无法摆脱它。

这是我的 div 的 CSS

#left_header_border {
    position:absolute;
    bottom:-1px;
    left:-100px;
    width:100px;
    height:1px;  

    /* gradient */
    background-color: transparent;
    background-image: -moz-linear-gradient(left, transparent, #cccccc); /* FF3.6 */
    background-image: -o-linear-gradient(left, transparent, #cccccc); /* Opera 11.10+ */
    background-image: -webkit-gradient(linear,left bottom,right bottom,color-stop(0, transparent),color-stop(1, #cccccc)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(left,transparent, #cccccc); /* Chrome 10+, Saf5.1+ */
    background-image: linear-gradient(left, transparent, #cccccc);
              filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='transparent', EndColorStr='#cccccc'); /* IE6–IE9 */
}

我试图检查 div 并使其更高，渐变似乎有效，但颜色为蓝色，并添加了边框。为什么？

4

2 回答 2

6

将过滤器更改为：

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='#00cccccc', EndColorStr='#ffcccccc'); /* IE6–IE9 */

过滤器不允许“透明”作为颜色值，但它允许您使用 8 位十六进制参考，其中前两位指定颜色的不透明度（就像rgba()颜色参考中的最后一个值）。

更多关于使用 RGBA 和透明度以及使用 MS 过滤器的信息

如果你遇到了可怕的数学问题，你可以0.6 transparency在 Windows 计算器中找到，在科学视图中打开它，执行255*0.6 = 153然后单击“十六进制”复选框进行转换 =99

在上面的示例中，它从完全透明（0.0 不透明度）= 255*0 = 十六进制值“ 00”开始到完全不透明（1.0 不透明度）=255*1 = 十六进制值“ ff”

更新正如评论中由三十点友情链接的那样，这是一个从RGBa到 MS 过滤器语法的便捷转换器

于 2011-03-31T09:19:42.027 回答
1

我建议使用CSS3Pie而不是硬编码filter这类事情的样式——它更容易且更符合标准；它允许您在旧版本的 IE 中使用标准 CSS3 进行渐变。

于 2011-03-31T09:59:41.360 回答