0

我的 CSS 看起来像这样：

#bbb {
  border: solid rgba(0, 0, 0, .45) 200px;
  height: 1500px;
  width: 960px;
}

我真的需要让边框透明，但它在 IE6/7/8 上不起作用，我该如何处理？

4

3 回答 3

1

不使用图像的替代方法是：

HTML

<div class="component">
    <div class="background"></div>
    <div class="content">..Content..</div>
</div>

CSS

   div.component {
    position: relative;
}
div.background {
    background:#f00;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
    -webkit-opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
}
div.content {
    background:#fff;
}

您可以根据需要缩放边框。这个使用定位，您也可以使用填充/边距。

http://jsfiddle.net/u7Srh/2/

于 2013-09-09T11:23:26.937 回答
0

您不能在 IE8 和更早版本中使用 RGBA，据我所知，它也没有 polyfill。

正如其他人已经说过的那样，您可以使用背景，但您不需要使用图像。您也不能使用Opactiy(or filter: alpha(opacity))，因为这也会使孩子变得透明。

相反，您可以为父元素分配 ARGB 格式的单一颜色filter渐变。

.parent {
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; /* IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF);   /* IE6 & 7 */
  zoom: 1;
}

这相当于background: rgba(255, 255, 255, .5);在现代浏览器中。

有关详细说明和 rgba 到 argb 转换器，请参阅本文。

于 2013-09-09T11:58:23.820 回答
0

你可以做这样的事情，它基本上是div在“内容”周围渲染一个带有透明背景的“边框div”。“边框宽度”是通过更改 中的padding值来设置的div.border，颜色/透明度来自该background-image值，该值当前链接到50% transparent black像素大小的图像。

HTML

<div class="border">
    <div class="content"></div>
</div>

CSS

div.content {
    background-color: #FFF;
    width: 300px;
    height: 200px;
}
div.border {
    display: inline-block;
    *display: inline;
    padding: 200px;
    background-image: url(https://dl.dropboxusercontent.com/u/6928212/halftransparentpixel.gif);
    zoom: 1;
}

这是fullscreen jsFiddle应该在 IE6/7/8 中工作的。

editable jsFiddle这是在旧版浏览器中无法正确加载的链接。

于 2013-09-09T11:06:12.153 回答