我得到透明文本，但我只想要透明背景，如何修复它？

发布于 2024-10-09 01:14:58 字数 342 浏览 0 评论 0原文

这是使窗口透明的 CSS：

<style type="text/css">
.tooltip {
 background:#1C1C1C url(/tools/img/tooltip/black_arrow.png);
 font-size:12px;
 font-weight: bold;
 height:80px;
 width:250px;
 padding: 10px 0px 20px 20px;
 color:white; 
 filter:alpha(opacity=60);
 opacity:.6;
}
</style>

如何更改它以使文本不会变得透明？谢谢

原文

This is the CSS that renders the window transparent:

<style type="text/css">
.tooltip {
 background:#1C1C1C url(/tools/img/tooltip/black_arrow.png);
 font-size:12px;
 font-weight: bold;
 height:80px;
 width:250px;
 padding: 10px 0px 20px 20px;
 color:white; 
 filter:alpha(opacity=60);
 opacity:.6;
}
</style>

How do I change it so the text doesn't become transparent? thanks

分享到QQ

分享到微博

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

发布评论

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

茶底世界 2024-10-16 01:14:58

使用 rgba 作为背景，而不是 opacity 属性：

background-color: rgba(28, 28, 28, 0.6);

当然，这仅在现代浏览器中受支持（在 IE8 及以下版本中会严重出现），因此您需要一个透明的IE8 和 7 的 png 文件。

但是，您已经在此处使用了背景图像，因此事情变得有点棘手。看看是否可以将当前背景图像分配给另一个元素，或者其他元素来删除那里的背景图像。

然后，你必须注意 IE6 - 它不支持透明 png。使用 DD_BelatedPNG 或一些类似的脚本来获得 IE6 的透明 png 支持。

Modernizr.js 可用于检测对 rgba 的支持，因此您的最终解决方案可能是看起来像：

.tooltip {
   background-color: #565656;
}

.rgba .tooltip {
   background-color: rgba(28, 28, 28, 0.6);
}

.no-rgba .tooltip {
   background-color: transparent;
   background-image: url('transparent.png');
}

还有一些 JavaScript：

if(!Modernizr.rgba){
     DD_belatedPNG.fix('.tooltip');
}

Use rgba for your background instead of the opacity property:

background-color: rgba(28, 28, 28, 0.6);

Of course this is only supported in modern browsers (glares sternly at IE8 and below), so you'll need a transparent png file for IE8 and 7.

However, you're already using a background image here, so things get a little tricky. See if you can assign the current background image to another element, or something else to get rid of that background image there.

Then, you'll have to take care of IE6 - which doesn't support transparent png. Use the DD_BelatedPNG or some similar script to get transparent png support for IE6.

Modernizr.js can be used to detect support for rgba, so your final solution might look something like:

.tooltip {
   background-color: #565656;
}

.rgba .tooltip {
   background-color: rgba(28, 28, 28, 0.6);
}

.no-rgba .tooltip {
   background-color: transparent;
   background-image: url('transparent.png');
}

And also some JavaScript:

if(!Modernizr.rgba){
     DD_belatedPNG.fix('.tooltip');
}

回复收藏 0 原文

南冥有猫 2024-10-16 01:14:58

http://css-tricks.com/non-transparent-elements- inside-transparent-elements/

对非透明元素“内部”透明元素的很棒的学习..

希望有帮助:)

回复收藏 0 原文

花辞树 2024-10-16 01:14:58

取消 .tooltip 容器中文本的嵌套。

<div class="container">
   <div class="tooltip"></div>
   <div class="text"></div>
</div>

使用 .tooltip 和 .text 的绝对定位将文本覆盖在工具提示的顶部。我相对确定嵌套在不透明容器内的任何内容都会继承相同的不透明度。

Un-nest the text from the .tooltip container.

<div class="container">
   <div class="tooltip"></div>
   <div class="text"></div>
</div>

use absolute positioning with .tooltip and .text to overlay the text on top of the tooltip. I'm relatively sure that anything nested inside the opaque container will inherit the same opacity.

回复收藏 0 原文

~没有更多了~