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" >FAQs</a>
<a class="hbupro-button hbupro-rudy-dark-red" >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 1 year, 4 months ago by
John Huebner.