CSS : W3 : Transparancy

Question

I'm using some W3 CSS to accomplish dropping text area on an image. It works fine. But when I go to transparency, it makes the text and button transparent as well. Is there an easy fix to only have the backgroud transparent and not the text/button.

I've tried a few things - all W3 (first code), and then a CSS inline style (2nd code). Still get transparent button/text.

W3 CSS

<div class="w3-display-middle w3-large w3-container w3-padding w3-sand w3-opacity" align=center>

Text Here And There
<br> 
<a href="sign_up.cfm" class="w3-button w3-round w3-green">Trial</a>
<br>More Text Here

</div>

and then inline too

<div class="w3-display-middle w3-large w3-container w3-padding" align=center>

 <div style="padding:4px;opacity:0.4;background:white">
 Text Here And There
 <br> 
 <a href="sign_up.cfm" class="w3-button w3-round w3-green">Trial</a>
 <br>More Text Here
 </div> 

</div>

ANSWER by Cris W

 <div class="w3-display-middle w3-large w3-container" align=center>

<div style="padding:4px;background-color: rgba(255,255,255,.6);border:1px solid black">
Text Here And There
<br> 
<a href="sign_up.cfm" class="w3-button w3-round w3-green">Trial</a>
<br>More Text Here
</div>  

</div>

Get rid of `opacity` all together and instead apply your opacity via the alpha channel on the background color; `background-color: rgba(255,255,255,.4);` voila. — Chris W., Feb 27 '19 at 20:58
rgba offers more customizability when it comes to opacity. CSS3 `opacity` will overlay a filter to the entire object and its children (in this case `div`). If you'd like to change only the background opacity or the text opacity, for example, rgba can be used interchangeably with HEX (e.g. `#ffffff`) and literal color strings (e.g. `black`) with the added alpha functionality. This is just for future reference! — Soma, Feb 27 '19 at 21:12
Addendum to Soma's comment. Alpha channel on an attributes color is always better performance than opacity and thus preferred. — Chris W., Feb 27 '19 at 21:26

score 0 · Accepted Answer · answered Feb 27 '19 at 21:12

Answer by Cris W

  <div class="w3-display-middle w3-large w3-container" align=center>

  <div style="padding:4px;background-color: rgba(255,255,255,.6);border:1px solid black">

 Text Here And There
 <br> 
 <a href="sign_up.cfm" class="w3-button w3-round w3-green">Trial</a>
 <br>More Text Here
 </div>  

 </div>

CSS : W3 : Transparancy

1 Answers1