CSS Непрозрачность вопрос наследования

Можно создать дубликат:
CSS Opacity Property CSS Непрозрачность вопрос наследования

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

Когда я записал любые тексты на слое, они также получают ту же прозрачность.

Я думал, что это из-за проблемы наследования и добавлено «position: relative» для сброса моего дочернего div, хотя это вообще не сработало.

Я просто хочу сбросить непрозрачность дочернего div (#TXT ниже).

Вот мой код.

<!DOCTYPE html> 
<html> 
<header> 
    <meta charset="UTF-8"> 
    <style type="text/css"> 
     *{margin: 0; padding:0; background-color: #555;} 
     #wrapper { 
      margin:0 auto; 
      background-color: white; 
      width: 922px; 
      height:349px; 
      margin-top: 150px; 
      -webkit-box-shadow: 0px 0px 7px 7px #333; 
      -moz-box-shadow: 0px 0px 7px 7px #333; 
      } 

     #ImgSection { 
      width: 922px; 
      height: 349px; 
      background-color: white; 
      position: absolute; 
      background: url("brand-new-car.jpg") -50px -200px no-repeat; 
      } 

     #TxtSection { 
      width: 322px; 
      height: 349px; 
      background-color: #222; 
      opacity: .5;   
      float: right; 
      -webkit-box-shadow: inset 3px 0px 3px 0px black; 
      -moz-box-shadow: inset 3px 0px 3px 0px black; 
      } 

      #TXT{ 
      position: relative; 
      font-size: 50px; 
      opacity: 1; 
      } 

    </style> 
    <script type="text/javascript"> 

    </script> 
</header> 
<body> 
    <div id="wrapper"> 
     <div id="ImgSection"></div> 
     <div id="TxtSection"> 
      <div id="TXT">dsdsad</div> 
     </div> 
    </div> 
</body> 
</html>

размер изображения brand-new-car.jpg - 1024x768.

И я хочу знать, как сбросить непрозрачность #TXT.

помогите пожалуйста.

Заранее спасибо.

источник

2012-04-09 Hoon

http://stackoverflow.com/questions/8237886/css-opacity-property – c69

Вы должны будете взломать свой путь, если хотите изображение с прозрачностью, поскольку hsla или rgba работают только для цветов. Вам придется изменить свой HTML, вынуть текстовую оболочку и затем поместить ее поверх слоя изображения. Это единственный выход.

Здесь вы можете найти Chris Coyier, поддерживающий тот же хак. http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

источник

2012-04-09 08:43:37

Вы не можете сбросить непрозрачность. Его унаследовали все потомки.

Но:

вы можете использовать rbga/HSLA/альфа-PNG backgroungs и RGBA/HSLA цвет для текста и границ, чтобы добиться подобного эффекта (но с большим количеством работы).

источник

2012-04-09 08:18:39 c69

Привет, я упоминаю свойство, с помощью которого вы можете увеличивать и уменьшать непрозрачность фона, и это не повлияет на цвет текста, его просто увидеть css, в основном вы должны использовать цвет rgb в фоновом режиме alpa для непрозрачности.

background: rgba (146,146,146,0.1);

или смотрите пример: - http://jsfiddle.net/8LFLd/3/

источник

2012-04-09 12:06:16

CSS Непрозрачность вопрос наследования

ответ

Смежные вопросы