Adding opacity to H2 background with colorpicker, CSS and PHP in a WP theme


Keywords:php 


Question: 

I am trying to add opacity to a h2 background element without adding opacity to the text. Normally, this would be a simple task, but I have integrated a color picker using option tree and PHP. Since the background color is chosen with a color picker, I can't simply add an RGBA color in the css. Here is the code I'm building, is it possible to add opacity to the background or change the option tree color picker to RGBA?

CSS:

article.post h2 {
    <?php $b_color = ot_get_option( 'menu_and_search_tabs' );
    if(isset($b_color) && $b_color !="") {
    ?>
background-color:<?php echo $b_color ?> !important;
    <?php } else {?>
background-color:transparent; !important; 
    <?php } ?>
}

If I add opacity to the above code it also adds opacity to the text.

HTML:

<article class="post">
<h2><a href=""><?php the_title(); ?></a></h2>
<article class="post">
</article>

1 Answer: 

You can write or find a function that converts, HEX to RGBA. I have done this in JavaScript, but it can be done in PHP too.

Here is a simple hex to rgba converter in php I found: