2013-02-12 69 views
0

如何将不透明度添加到以下CSS语句中?如何在背景上添加不透明度?

background: none repeat scroll 0 0 #205081; 

css2有没有可能?否则,我该如何在css3中添加不透明度声明?

+0

请记住,RGB背景不适用于旧版本的IE,请告诉我是否需要所有解决方案。 – 2013-02-12 10:25:11

+0

嗯我还不知道。如果你有时间可以添加一个完整的例子来收集这里收集的所有内容供其他人参考。 – membersound 2013-02-12 10:26:50

回答

1

可悲的是,以因各种版本,并在全球浏览器类型不存在在所有浏览器上兼容的单个CSS条目,无需JavaScript干预。但是,您可以使用多种造型技术,并且使用'if IE 7'HTML来解决不喜欢现代代码的浏览器。

以下是您应该考虑的各种方法,以实现跨浏览器的最大兼容性。

增加对旧的浏览器

的另一种方法。如果你想在Internet Explorer的更高版本的透明背景的easist方法是样式旧版本使用旧代码的浏览器。您可以通过在您的HTML或PHP文件的

<head> 
</head> 

部分中添加以下代码来过滤样式规则。

HTML中的HEAD

您应该添加以下代码,如果你没有它已经到位。现在许多框架和CMS都包含这些功能,因此只需在编辑之前查看源代码,并只在其不是已有的时候才添加。

<!--[if lt IE 7 ]><html class="ie ie6 no-js" lang="en"> <![endif]--> 
<!--[if IE 7 ]><html class="ie ie7 no-js" lang="en"> <![endif]--> 
<!--[if IE 8 ]><html class="ie ie8 no-js" lang="en"> <![endif]--> 
<!--[if IE 9 ]><html class="ie ie9 no-js" lang="en"> <![endif]--> 

做一个透明的50%PNG文件

只需加载任何Photoshop或任何不错的选择,并作出新的文件1x1像素的,然后添加一个新层,并删除背景。然后在图层中填充您想要使用的颜色,然后使该图层具有50%的不透明度。然后将其保存为PNG并上传到您的主机。如果您担心页面上的加载时间,那么您可以使用PNGCrush或Smush.it将该PNG压缩到小于0.5kb。

在你的CSS添加这个(您将需要使用IF 7/6等)

.ie6, .ie7, .ie8 .your-div-class-or-id { 
    background: transparent; 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=background.png,sizingMethod='scale'); 
} 

}

CSS对于新的浏览器

您应该使用新代码对于较新的浏览器,只要有可能,并且不使用PNG来提供透明背景,这意味着我们不会通过添加文件提取来增加页面加载时间。只需添加:

background: rgba(32, 80, 129, 0.5) 

将与现代的浏览器,如IE9 +,火狐,Chrome,Safari浏览器

您应结合使用现代和较旧的CSS工作

请注意,您使用这两个CSS元素RGBA和AlphaImageloader,所以PNG文件只在绝对需要的时候使用,我知道很多人对于使用不透明度的PNG是不利的,但是只有在最坏的情况下使用PNG,而在较新的浏览器时不加载用过的。

2

使用rgba()。在你的情况

背景:RGBA(32,80,129,1)

其中最后数量为不透明度。 1是完全不透明的,0是不可见的。所以,如果你想有50%不透明的将是

背景:RGBA(32,80,129,0.5)

+0

很好,这可能是我在找的东西。 – membersound 2013-02-12 10:24:08