Как удалить прозрачный цвет (непрозрачности)

Question

У меня есть следующие коды:

HTML ...

<div id="solidcolor"> 
    <div class="transcolor">transcolor 
     <div class="notranscolor">some text</div> 
    </div> 
</div> 

CSS ..

#solidcolor{ 
    background: url("http://i45.tinypic.com/o5aycp.gif") repeat; 
    width: 200px; 
    height: 200px; 
} 
.transcolor{ 
    background: blue; 
    opacity: 0.4; 
    height: 100px; 
} 
.notranscolor{ 
    background: red; /* I want this color to solid color not transparent color*/ 
} 

DEMO

Редактировать заметку Я не мог использовать метод rgba(), чтобы установить его фоновым цветом, потому что мне нужно установить линейный градиентный цвет.

Edit1

Я не мог получить правильное решение этой проблемы, даже после применения абсолютного позиционирования тоже. Но следующая идея, которую я хотел бы сделать с помощью метода calc(), но не выходит. Есть идеи?

Edit2

Как @rokburgar высказал ответ, я не мог в состоянии решить мою проблему, даже после применения абсолютного положения. Но я хотел установить непрозрачность, равную 1,25. Я знаю, что это должно быть от 0 до 1, но он заявил, что 0,4 * 1,0 = 0,4, как это 0,8 * 1,25 = 1, тогда почему это не работает?

Answer 1

Ну так как opactiy унаследован, вы должны отдельно указать непрозрачность для разных элементов. Один из методов, вы можете использовать, чтобы определить только прозрачный цветной текст в отдельном span, как это:

HTML

<div id="solidcolor"> 
    <div> 
     <span class="transcolor">some transparent text</span> 
     <div>some normal text</div> 
    </div> 
</div> 

CSS

.transcolor { 
    opacity: 0.4; 
} 

---

---

Другой метод вы можете использовать отдельные divs, такие как:

HTML

<div id="solidcolor"> 
    <div> 
     <div class="transcolor">some transparent text</div> 
     <div>some normal text</div> 
    </div> 
</div> 

CSS

.transcolor { 
    opacity: 0.4; 
} 

Answer 2

Непрозрачность наследуется и не может быть просто удалены. Можно было бы ожидать, что вы можете сбросить прозрачность дочернего элемента.

То, что вы сделали здесь означает:

.notranscolor -> opacity: 0.4 * 1.0 = 0.4 

Решение:

Absolutly содержание положения детского дел.

Transparency trick