Im creating a mybb theme, i have avast knowledge in Web designing but for some crazy reason i stopped and im trying to remember what i knew (Havent done it in a year).
I want the background of a container to be a certain color. Lets say blue. I want to increase the opacity of this blue by 50%. When i do that i simply get the whole theme to go into opacity by 50% when really all i want is the blue container background. How can i fix this?
Actually what im trying to achieve is have a transparent background for the container so if you’d like to help me do that i’d appreciate it since i cant remember how.
This is the container code
border: 5px solid #246cb0;
margin: auto auto;
Please message me ASAP if possible thank you have a wonderful day
i want the clear transparent the image has
:: channels grumpy cat:: NO!
Opacity just doesnt work that way.
Am using percentages as a conceptual tool, not the actual value string… hope you are able to follow my logic on this.
Consider it as a variable; if you give the container “50%” opacity, then ‘100%’ opacity will calculate to 50%. Opacity, unlike font-size, cannot be greater than “100%” ( it wouldn’t make sense anyway… what’s MORE THAN FULLY OPAQUE? )
That kinda leaves you with 3 choices:
- a transparent PNG ( this is if you are looking for widest browser support)
- the “transparency” you are trying to achieve is of a solid color, background: RGBA(r,g,b,a); works extremely well. Actually, for supporting browsers, this can be used for gradients as well.
- If you MUST have a complex semi transparent BG, you could still use transparency ( see, it’s not an entirely useless property) by using a pseudo element ( :before, :after),absolute position, and a negative z-index ( OR you could relative position the children and give THEM a higher z-index).
to get the pseudo element to cover the entire element , regardless of it’s dimensions, use: top:0; bottom:0; left:0; right:0;
hope that helps
thank you for your vivid detail but im presumming that i’ll simply use a solid png and create a more transparent image. hopefully i can achieve this easily.