CSS：IE：样式“background-color:rgba(...)”的版本

发布于 2024-09-18 12:11:00 字数 352 浏览 9 评论 0原文

我需要一个带有背景图像的 div，并且该图像之上应该是不透明度为 0.7 的黑色层。

为此，我正在使用：

background-color:rgba(0, 0, 0, 0.7);
background-image:url(/Images/hash-000000-pattern.gif);

这在除 IE 之外的所有版本中都能完美运行。在 IE 6、7 和 8 中，不会渲染 background-color:rgba(0, 0, 0, 0.7);。

在不更改标记的情况下，我可以在 CSS 中做些什么来在背景图像上创建一个暗淡不透明的黑色图层吗？某种“过滤”风格？

原文

I have a requirement to have a div with a background image, and overtop that image should be a 0.7-opacity black layer.

For this, I'm using:

background-color:rgba(0, 0, 0, 0.7);
background-image:url(/Images/hash-000000-pattern.gif);

This works perfectly in everything but IE. In IE 6, 7, and 8, the background-color:rgba(0, 0, 0, 0.7); isn't rendered.

Is there anything I can do in CSS without changing the markup to create a dimmed-opacity black layer over the background image? Some "filter" style?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

开始看清了 2024-09-25 12:11:00

不。您唯一的选择是 ms-filters 或稍有不同的选择。

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

也可以看看这个： http://www.hedgerwow.com/360/dhtml /rgba/demo.html

No. The only options you have are ms-filters or a slightly different one.

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

see this one too: http://www.hedgerwow.com/360/dhtml/rgba/demo.html

回复收藏 0 原文

茶色山野 2024-09-25 12:11:00

我遇到了类似的问题，为了解决这个问题，我曾经在模态 div 上进行类，其中一个用于背景不透明度等。另一个只是用于显示微调器。这条路线似乎适用于我测试过的所有当前浏览器。

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;    
    background: rgba(255,255,255, .8);
    background-color: #fff;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.spinner{
    z-index: 1010;
    background-image: url(/_Layouts/Images/GEARS_AN.GIF);
    background-position: 50% 50%;
    background-repeat: no-repeat;    
}

I had a similar issue and to over come it I used to classes on my modal div one for the background opacity etc.. the other just to display the spinner. This route seems to work for all current browsers I've tested on.

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;    
    background: rgba(255,255,255, .8);
    background-color: #fff;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.spinner{
    z-index: 1010;
    background-image: url(/_Layouts/Images/GEARS_AN.GIF);
    background-position: 50% 50%;
    background-repeat: no-repeat;    
}

回复收藏 0 原文

~没有更多了~