css在灰色透明的背景下，如何才能使上面的字的颜色为白色？

html-css07

css在灰色透明的背景下，如何才能使上面的字的颜色为白色？,第1张

透明背景不是元素透明度，只有设置了元素的透明度才会出现字体也会透明，所以颜色无论设为哪一种色彩都不是理想的。

常用灰色背景透明正确方法：

1.

设置背景透明样式

.bg{

background-color:

rgba(255,255,255,.5)

}，但是不支持ie低版本浏览器（ie8及以下）；

2.

设置背景图片为半透明png图片.bg{

background-image:url(touming.png)}，兼容性较好，但是ie6浏览器下需要引用‘ie6下png图片透明插件’（例如：DD_belatedPNG）。但是微软已经宣布淘汰ie6浏览器，ie6已不再成为兼容调节的主流。

首先你要确定，你的灰色背景不是图片自带的。

在这个前提下，你可以通过浏览器（在浏览器页面按F12，然后点击灰色背景）找到这个灰色背景的标签。然后你会看到background：#xxxxxx这个样式。然后你看下，这个样式右上角会有个名称和数字，分别代表这个样式在什么样式表和第几行。然后你找到这个位置，把这个样式改成bakground:none；或者你需要的颜色就可以了

下面是最大限度兼容所有浏览器的代码：

html{

    -webkit-filter:grayscale(100%)

    -moz-filter:grayscale(100%)

    -ms-filter:grayscale(100%)

    -o-filter:grayscale(100%)

    filter:grayscale(100%)

    filter:url("data:image/svg+xmlutf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale")

    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)

}