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

Posted 2023-05-06

参考技术A 透明背景不是元素透明度，只有设置了元素的透明度才会出现字体也会透明，所以颜色无论设为哪一种色彩都不是理想的。
常用灰色背景透明正确方法：
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已不再成为兼容调节的主流。

透明背景div上的背景颜色过渡效果？

【中文标题】透明背景div上的背景颜色过渡效果？

【英文标题】：Background-color transition effect on transparent background div?

【发布时间】：2013-10-20 17:45:00

【问题描述】：

我有一个显示返回顶部箭头图像（精灵）的 div。我正在使用 css 更改背景位置以实现颜色更改。

如何在不使用背景位置转换的情况下转换箭头颜色？我正在寻找背景色过渡效果，但我不能使用它，因为我希望 div 的背景是透明的。希望我的问题不会太混乱。

http://jsfiddle.net/9stkQ/

css:

.top
    background:url(../images/top.png) -10px -10px;
    background-repeat:no-repeat;
    width:20px;
    height:20px;
    display:block;
    margin:0 auto;
    cursor:pointer;


.top:hover
    background:url(../images/top.png) -10px 30px;

【问题讨论】：

我们需要查看带有链接图像的有效 JSfiddle 以了解您想要实现的目标。

这个够清楚了吗？ jsfiddle.net/9stkQ

【参考方案1】：

您可以通过这种方式在同一图像的 2 个精灵之间进行转换：

.top
    background:url(http://placekitten.com/200/300) 0px 0px;
    background-repeat:no-repeat;
    width:100px;
    height:100px;
    display:block;
    margin:0 auto;
    cursor:pointer;
    position: relative


.top:after 
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background:url(http://placekitten.com/200/300) 100px 0px;
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 2s;


.top:hover:after 
    opacity: 1;

由于您在伪元素中显示第二个精灵，因此过渡不会“移动”

fiddle

【参考方案2】：

另一种方法是不使用图像，而是使用伪元素。

JSFiddle Example

.top 
    position:relative;
    width:0;


.top:before 
    position:absolute;
    border:20px solid transparent;
    border-bottom:20px solid red;
    content:"";


.top:hover:before 
    border-bottom:20px solid green;