1

我正在使用 JQuery 库。我使一些 div 透明（0.7）。该div中有一些文本。我看到了不愉快的情况：文本字体很丑。据我了解，因为所有 div 区域都是透明的，我的文本也是。我可以让它不透明吗？

更新

我试图让我的 div 不透明：文字很棒！那么，我怎样才能使我的 div 透明，但不应该包含的文本。

在 Win、Linux、MacOS 中测试。铬，火狐，歌剧，IE

4

4 回答 4

0

有趣的问题。这是我首先想到的解决方案：

<style>
  .wrapper {position:relative;}
  .transparent { position:absolute; background:red; top:0; bottom:0; left:0; right:0;}
</style>

<script>
  $(document).ready(function(){
    $('.transparent').css('opacity',.7)
  });
</script>

<div class="wrapper">
   <div class="transparent"> </div>
   <div class="opaque">your text</div>
</div>

基本上，您将文本定位在透明框的顶部。

于 2009-11-06T21:51:32.570 回答
0

我倾向于使用半透明的 .png 文件，然后对 IE6 使用 hack，该线程与其他选项一起对此进行了描述。

于 2009-11-06T22:27:03.627 回答
0

您可以使用 rgba() 来指定框的颜色， rgba() 不会被任何子元素继承。不幸的是，rgba 仅受更现代的浏览器（FF、safari、chrome）支持，但使用起来非常棒。

#yourbox {
    background-color:rgba(red,green,blue,alpha);
{

您所做的就是在 RGB 中获取您想要的颜色值，然后最后设置 alpha 值，您还需要为不支持它的浏览器设置一个备用值。

#yourbox {
background-color:#fff;    
background-color:rgba(255,255,255,0.5);
{

这将在大多数现代浏览器中为您提供 50% 不透明度的白框，但在大多数版本的 IE 中将为您提供纯白框。

于 2009-11-06T22:29:06.260 回答
0

我为半透明背景创建了一个通用类，为不可见文本容器创建了一个通用类，为特定实例创建了一个类，具有任何大小和位置样式。例如，我可能有.color_box、.text_box和.side_note。然后我创建一些代码，如下所示：

样式，像这样：

.color_box, .text_box {
position: absolute;
z-index: 20;
...
}

.color_box {
background: #xxxxxx;
opacity: .5;
z-index: 10;
...
}

.side_note {
top: 50px;
left: 100px;
width: 240px;
...
}

和这样的HTML：

<div class="text_box side_note">lorem ipsum dolor sig amet...</div>
...
<div class="color_box side_note"></div>

第二个 div 可以放在与第一个相同的容器内的任何位置，我更喜欢尽可能晚地放置，因为它对 SEO 目的没有帮助。此特定设置对于具有许多此类半透明框的站点最有用。您需要一个类来创建一个新设置，并且为每个类重复使用.color_box和类。.text_box如果您需要更改背景颜色，它在一个地方。任何一个盒子的定位都在一个类中。

于 2009-11-08T04:48:53.560 回答