Question

我正在使用JQuery库。我做了一些div透明（0.7）。 div中有一些文字。而且我看到了不愉快的情况：文字字体很难看。据我所知，导致所有div区域都是透明的，我的文字也是。我可以让它不透明吗？

UPD

我试图让我的div不透明：文字太棒了！那么，我怎样才能让我的div透明，但那里包含的文字不应该是。

在Win，Linux，MacOS中测试过。铬，Firefox，歌剧，IE

Answer 1

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

<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>

基本上，您将文本放置在透明框的顶部。

Answer 2

我倾向于使用半透明的.png文件，然后对IE6使用hack，这在this thread中与其他选项一起描述。

Answer 3

您可以使用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版本中都会为您提供一个可靠的白框。

Answer 4

我为半透明背景创建了一个泛型类，为不可见文本容器创建了一个泛型类，为特定实例创建了一个类，具有任何大小和位置样式。例如，我可能有.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类。如果您需要更改背景颜色，它就在一个地方。任何一个盒子的定位都在一个单独的类中。

透明区域中的字体

4 个答案: