background overlay opacity

Page on site with issue https://www.rudyschmid.com/vehicle-maintenance/rust-proofing/

Here is the HTML generated by this plugin:

<div class="hbupro-hero-banner-wrp-1 hbupro-clearfix hbupro-layout-2">
  <div class="hbupro-hero-banner hbupro-clearfix">
    <div class="hbupro-hero-banner-inner hbupro-clearfix">
      <div class="hbupro-hero-banner-inner-wrap">
        <div class=" hbupro-medium-12 hbupro-columns hbupro-hero-content-position hbupro-text-center">
          <h2 class="hbupro-hero-banner-title">Rust Proofing for Your Vehicle</h2>
          <div class="hbupro-hero-banner-sub-title">
            <p>Keep Rust at Bay on Your Car in CNY's Unpredictable Weather</p>
          </div>
          <div class="hbupro-hero-banner-links">
            <a class="hbupro-button hbupro-rudy-dark-red" href="https://www.rudyschmid.com/vehicle-maintenance/rust-proofing-faqs/">FAQs</a>
            <a class="hbupro-button hbupro-rudy-dark-red" href="https://www.rudyschmid.com/contact-us/">Contact Us</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

And here is the CSS

<style type="text/css">
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner {
    background-image: url(https://www.rudyschmid.com/wp-content/uploads/2020/06/DSC04593-2-scaled.jpg); 
    background-size:cover;
    background-position: 50% center;
    background-attachment: fixed
  }
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner .hbupro-hero-banner-inner {
    background-color:#b72a2a;
    opacity:0.4;
  } 
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner-inner-wrap{
    max-width: px;
  }
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner h2.hbupro-hero-banner-title {
    font-size: 30px !important;
    line-height: 30px !important;
    color:#fff
  }
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner .hbupro-hero-banner-sub-title p,
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner .hbupro-hero-banner-sub-title {
    font-size: 20px !important;
    color:#fff
  }
  .hbupro-hero-banner-wrp-1 .hbupro-hero-banner-inner {
    padding:150px 0px 150px 0px
  }
</style>

As you can see the the content (title, subtitle, ect) is contained by the element with the selector:

.hbupro-hero-banner-wrp-1 .hbupro-hero-banner .hbupro-hero-banner-inner

This element is set to an opacity of 0.4 as defined in the overlay opacity when creating this banner. Because the entire element is set to this opacity all of the elements that it contains are also set to this opacity, making the text semi-transparent. It is not possible to set the inner elements of a container to higher opacity than the container.

To correct this either 1) the text cannot be contained in the overlay element or 2) an RBGA color value must be used for the background color of the overaly instead of setting the opacity of the entire overlay container.

Transparent text is not the desired result, only a semi-transparent overlay of the image is the desired result.

• This reply was modified 2 years, 7 months ago by John Huebner.

This is not really what I was looking for as it means that the overlay color will need to be applied to the background image before uploading, this is not something that my clients will be able to do easily. It also means that the overlay settings in this plugin are a completely useless feature.

Even an addition of some type of filter hook in an update that would let me correct the inherent problem would be a step in the right direction.