Непрозрачность CSS с родительским объектом - PullRequest
Новая
       6

Непрозрачность CSS с родительским объектом

1 голос
/ 26 июня 2011

Здравствуйте, я хотел сделать так, чтобы фон имел непрозрачность 80%, но внутренние дочерние объекты не наследуют это свойство и остаются на 100% непрозрачными и видимыми. Как бы я написал сценарий CSS или JavaScript, чтобы это появилось? Что-то вроде: 

<code>
<div style=opacity:80>
     <div style=opacity:100>
          I want to make this text to not be partially transparent due from style inheritance
     </div>
</div>

Есть идеи? Спасибо за любую помощь заранее

Приветствия

Ответы [ 3 ]

2 голосов
/ 26 июня 2011

Nevermind! Я нашел очень простое решение: 

<code>
<div style="background-color: rgba(0, 0, 0, 0.8)">
    <div style="background-color: rgba(255, 255, 255, 1.0); margin: 15px">
         This text is 100% OPAQUE with a white background and 80% opaque outer background! YAY!
    </div>
</div>

P.S. Нашел этот метод из проверки исходного кода Twitter

2 голосов
/ 26 июня 2011

Это работает: 

<div style='position:relative;width:WWW; height:HHH;'>
     <div style='opacity:80; position:absolute; top:0; left:0; width:WWW; height:HHH;'> <!-- cover -->
     <div>
          I want to make this text to not be partially transparent due from style inheritance
     </div>
</div>
1 голос
/ 26 июня 2011

Здесь есть две возможности, в порядке гибкости перед простотой:

Метод 1:

Создание DIV без стиля (DIV # 1).Создайте второй DIV (DIV # 2) внутри него с заданными фоном, границами и непрозрачностью.Создайте третий DIV рядом с DIV # 2, используя относительное позиционирование, чтобы поместить его поверх DIV # 1.Поместите свой контент в этот DIV!

Этот метод не работает должным образом, потому что растяжение контента DIV по сути не растягивает фон DIV.

Метод 2:

Создайте один отдельный DIV, но вместо непрозрачности используйте значения RGBA.Проще говоря, с помощью RGBA вы указываете значения RGB, а затем уровень альфа (прозрачности), например: 

background: rgba(255,255,255,0.7);

Вы можете использовать RGBA для фона, границ, текста, назовите его - и просто объявитецвет дочернего элемента, чтобы быть непрозрачным значением достаточно для предотвращения наследования прозрачности.

Для изображений относительно просто добавить альфа-слой в PNG с большинством программ для редактирования изображений.Обратитесь к своему руководству.

Для создания IE8 и более ранних версий требуется небольшая перекрестная махинация, но это уже другой вопрос (и ответ.)

...