-
Posts
-
Can I change the opacity of a color section. I’d like to reduce the opacity of the white color sections and see what it would look like when the sections scrolls over the top section image.
Mike
http://abspilates.wpengine.com/ (hosted on WPengine)
Hi Mike!
Try with this CSS code:
.avia-full-stretch { opacity: 0.4; }You can set opacity from 1 to 0.
Regards,
JosueHi Mike,
That won’t work as it is right now, because that section doesn’t cover all the page, it creates an illusion, but its height is limited:
However, it think that you could get a similar effect if you include the other content inside that color section and then apply a transparent background to them.
Best regards,
JosueSorry I modified that page over the weekend. I’ tried your suggestion on page titled ‘test’ but it reduces the opacity of the content not just the color section as a background.
Steps:
Added a color section below image with opp in the section id
added text
In custon xss added
#opp {
opacity: .4;
}
result: the text has a .4 opacity but the white back ground of color section did not change.
MikeHi!
You could probably do it using rgba colors for the background of a text element. You would put your image in the color section and then add your elements in there. Then add a custom class name to the elements and give that class a background color using rgba and the transparency on the color.
Add this to your functions.php to get the custom class field on all elements:
add_theme_support('avia_template_builder_custom_css');Regards,
Devin
- The topic ‘Color Section Opacity’ is closed to new replies.