How to set a background opacity without affecting the text
You can use rgba
to make only the background color transparent, e.g.:
background: rgba(255, 249, 192, 0.7);
user agent
With a strong foundation in object-oriented programming (OOP), I bring +4 years of professional experience as a Full Stack PHP developer, skilled in Laravel and VueJs frameworks for web development and API integration. I consistently keep myself up to date with the technologies I use as a developer and subscribe to the known relevant blogs in my field (Laravel News, Medium, VueJs.org, etc.), and to showcase my work, mainly built in Laravel and VueJs, I gradually update my GitHub. I consider myself a perpetual learner, and my passion is to use my skills and learnings to build solutions that create a significant impact on the lives of people around me.
Updated on June 07, 2020Comments
-
user agent about 4 years
I am basically trying to create this:
Added a parent container with a background image,then a child container that needs to be transparent.
Here my HTML:
<div class="scent-brand-contact"> <div class="scent-brand-container"> <section id="black-studio-tinymce-8" class="widget-1 widget-first widget-odd widget widget_black_studio_tinymce"> <div class="textwidget"> <p>All our fragrances are developed in compliance with the International Fragrance Association ensuring strict adherence to safety purity and manufacturing standards.</p> <p>LEARN MORE ABOUT HOW SCENT BRANDING CAN BENEFIT YOUR BUSINESS</p> </div> </section> <section id="text-4" class="widget-2 widget-last widget-even widget widget_text"> <div class="textwidget"> <button type="button">contact us today</button> </div> </section> </div> </div>
And the CSS:
.scent-brand-contact{ position:relative; background-image: url(images/lemon.jpg); background-position: center center; background-attachment: fixed; background-size: cover; min-height:380px; } .scent-brand-container { background-color: #fff9c0; padding: 10px; opacity: 0.7; padding-top: 5%; margin: auto; position: absolute; top: 12%; width: 100%; min-height: 285px; }
At the moment,it's happening that the button and the texts are also getting the opacity. How can I have the transparent background without affecting the text and the button?
-
Mahi about 5 yearsHi Andreas, How can we add alpha , if we are getting dynamic color as theme= #4e74f0 (hex format). and we are adding it to element as - $().css('background", theme) , $().css('opacity',0.1). Here, instead of opacity, how we can give alpha same as rgba
-
andreas about 5 years