Confirmation of transparency required

Hi folks.

I’m updating a client site that was originally built in a previous version of Blocs, but has been updated to v5.0.5.

I have a transparent banner on the homepage. It was a 60% tint of white, so that the background photo was visible through the banner, and the black text on top remained legible. But for some reason the transparency doesn’t appear to be working in the class that I’ve assigned to the object.

As you can see from the screensnap below the RGBA colour values are set to 255, 255, 255, 0.6 – which should be a 60% tint of white, no? But look behind the colour picker dialog and you can see that the banner is a solid mid-grey, not a transparent white.

Have I missed a feature in a Blocs update? Is this still the way to add transparency to an object? Or has @Norm added an alternative way to achieve this? Any thoughts or advice gratefully received. Thanks.

Looks like you have a blend mode set also on that panel. What have you set that too?

Blend Mode is set to Normal.

Just created a new class called .transparent-white. The only property I changed was the colour to the same RGBA values as above. Applied it to the banner, and got the same result, i.e. no transparency.

Is it like that in preview?

Be curious to see what the browser inspector says on that element. I’ve had occasions where styles were not applying in 5.0.5.

1 Like

I’ve been looking at the site in Safari, and the CSS appears to be correct. It’s the element on the site that doesn’t seem to be playing nice :frowning:

Screenshot 2023-01-31 at 17.48.46

Okay, so I seem to have isolated the problem. I just don’t know how to fix it.

I have an inherited colour in the root
– swatch-var-Unnamed-Swatch: rgba (0,0,0,1.0);

Screenshot 2023-01-31 at 17.53.51

Somehow it has been applied to the banner. Not sure how though. When I switch the code for this colour off, in a browser, the banner appears correctly as white transparent.

And now I’ve fixed it :slight_smile:
The row, which contained the banner element had black applied to it.
This was causing the white transparent to appear grey.
Thanks @PeteSharp for making me look. Then look again. And look once more! :wink:

3 Likes

Yes, the devil’s in the details :wink: Glad you found it.

1 Like