How to apply opacity to background only

[newcoder1010]

Hello,

HTML:

<div class="text-inner text-left text-white">
                  
<h1>MULTI-FAMILY</h1>
<h1>REAL ESTATE INVESTMENTS</h1>
<p><span style="font-size: 140%;">x x x x x  x x.</span></p>
<a href="http://examplesite.com/" target="_self" class="button secondary">
    <span>xxx With us</span>
  </a>

<a href="http://examplesite.com/" target="_self" class="button white is-outline">
    <span>xxx Portal</span>
  </a>

              </div>

CSS:

.text-white {
    color: #ffffff;
    background: #0808f3;
    opacity: .5;
}

Opacity now applied to the texts as well. I only like to apply opacity to background class only. How can I do it?

Thanks!

Edited August 2, 2020 by newcoder1010

[dsonesuk]

Use rgba() a meaning Alpha transparency, it will only affect the background color then.

[newcoder1010]

Thanks! It works better. Looks like below code apply default level opacity. How can I specify the level of opacity?

background: rgba(255,0,0,0.3);

 

[dsonesuk]

The last digits represent the level of opacity the same as opacity property. 0 to 1.

HEX colour also has an alpha in hex numbering you the solid 6 color characters(#00FF00), then by adding two extra hex characters, these will also change transparency (#00FF00A5).

The last two character representing alpha values can be found by googling.

 

Edited August 3, 2020 by dsonesuk

[newcoder1010]

Very good info. Thank you!