Как получить полупрозрачный фон с непрозрачным текстом?

Question

Я пытаюсь использовать этот метод, я просто помещаю 2 деления, я создаю стиль для первого, добавляя фон и делая его полупрозрачным, и я создаю стиль для первого, чтобы сделать его непрозрачным:

Это код:

<div id="container">
    <div id="opaquetext">
      This is a normal text
      on a translucent background
    </div>
</div>

И CSS:

   #container {
       background-color: #ffffff;  /* the background          */
       filter:alpha(opacity=50);   /* Internet Explorer       */
       -moz-opacity:0.5;           /* Mozilla 1.6 and below   */
       opacity: 0.5;               /* newer Mozilla and CSS-3 */
    }
    #opaquetext {
       filter:alpha(opacity=100);  /* discarded */
       -moz-opacity:1.0;           /* discarded */
       opacity: 1.0;               /* discarded */
    }

Я думал, что это будет работать, но по какой-то причине он также делает текст прозрачным.

Answer 1

Стили непрозрачности влияют на отображение всего элемента - как его фона, так и цвета переднего плана. Стили также умножаются на дерево элементов. Другими словами, ваш внутренний div просто стилизован, чтобы иметь 100% непрозрачность внешнего div. 100% непрозрачности 50% означает, что она отображается с той же непрозрачностью, что и родительский элемент: 50%.

Существует два обходных пути, ни один из которых не требует двух div с, каждый из которых позволяет вам указать color: #000000 для вашего текста как обычно:

• Использование прозрачного фонового изображения
  ^{IE не поддерживает это до IE7}

• Использование background-color: rgba(255, 255, 255, 0.5)
  ^{IE не поддерживает это до IE9, Firefox не поддерживает это до 3.5}

Answer 2

Укажите фон, используя rgba () вместо # ... или rgb (), где последний аргумент в rgba обозначает непрозрачность фона. Непрозрачность предназначена для определения непрозрачности всего элемента. Например:

background: rgba(255, 0, 0, 0.2)

Подробнее об этом: http://www.css3.info/preview/rgba/

Но это может вызвать проблемы совместимости со старыми браузерами и т. Д. Если вы хотите поддерживать старые браузеры, вам следует рассмотреть возможность использования прозрачного фонового изображения, как указано в ответе boltclock.

Answer 3

Непрозрачное наследование является стандартным поведением всех браузеров. Если вы хотите, чтобы дочерний элемент div наследовался по непрозрачности, у вас есть два варианта:

1. с использованием абсолютной позиции в стиле # opaquetext:

   #opaquetext {
       position: absolute;
       top: 10px;
       left: 10px;
       filter:alpha(opacity=100);  /* worked */
       -moz-opacity:1.0;           /* worked */
       opacity: 1.0;               /* worked */
   }
   

2. с использованием программного обеспечения для обработки фотографий / изображений, чтобы создать фон с желаемой непрозрачностью, и настройку удаления непрозрачности в CSS.

ref:

• http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
• http://www.wickham43.supanet.com/~wickham43/tutorial/opacity.html