• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Closed How to prevent text and other items affected by opacity?

Yellow Swan

Why Stop Dreaming When You Wake?
In the middle of make a mobile friend IC code for an RP I'm in. Now a while back I asked for help on how to set the transparency, and all was dandy and text was legible- but of course I want the BG to be slightly more translucent but this has resulted in the text becoming unreadable. I counteracted this by giving the text a tight shadow, but I want to figure out how to actually prevent image/texts from the transparency too. I'm actually attempting to learn instead of my short cuts to get around the code in not conventual ways. (I think more like a client than a coder lol)

Anyways; Here is what it looks like

Name?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

coded by Yellow Swan


Here is my mess of a code- And my limited failed attempts to remedy the issue~
[bg="transparent; background: url('https://1.bp.blogspot.com/-_E-y64f9ukY/XzJzOY4XmII/AAAAAAABLYo/UBZAo-HjoxE0zJtCDTL9wEfSUKuW_AqTACLcBGAsYHQ/d/80121029_p0.png'); opacity: 1; border: 3px solid #000000; background-size: cover; margin: auto; max-width: 300px; background-position: 50% 50%;"][bg=transparent; opacity: 0.7; background: #9974c1; color: #da7f8f; border: 1px solid #6fa4aa;][comment] Bg Opacity was fix by Low fidelity (I had it in my head it would be 1 to 100; not a .01 to 1)[/comment][border=0; opacity: 1; height:150px; width:150px; border:3px solid #da7f8f; background:url('https://i.ibb.co/wy2cb8f/zezzy.png'); background-size:100%; border-radius:40%; margin:auto; padding:0px;][/border][URL='www.CS-LINK-GOES-HERE.COM'][border=0; opacity: 1; color: #000000; padding:0; font-weight:bold; font-size:5em; letter-spacing:1px;margin-top:-20px; text-align:center; font-family:'Lovers Quarrel';]Name?[/border][/URL][border=0;box-sizing:content-box;width:93%;height:254px;padding:0px 0;display:inline-block;overflow:hidden; display:flex; flex-direction:column;margin-top:-15px][border=0; opacity: 1; height:100%; width:200%; padding:0; overflow-y:scroll;][border=0; font-smoothing:antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;height:auto; text-shadow: 0px 1px 1px #000000; width:50%; padding:0 10px; box-sizing:border-box; font-family:'Azeret Mono'; font-size:13px;text-align:left;color:black; line-height:130%]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [/border][/border][/border][/bg][/bg][bg=transparent; height:10px;width:100%;z-index:6;opacity:1;color: #00000);font-size:10px;text-align:center; position:absolute; top:-10px; left:0; padding:0;][font=Bonbon]coded by Yellow Swan[/font][/bg]
 
You can replace the opacity property with background: rgba(0 0 0 / 50%).

The 0 0 0 is the hex number and the percentage defines how much you want it transparent. The opacity function tends to apply to all child borders, but the background method doesn't and also does not affect text inside that border.

Name?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

coded by Yellow Swan


Code:
[bg="transparent; background: url('https://1.bp.blogspot.com/-_E-y64f9ukY/XzJzOY4XmII/AAAAAAABLYo/UBZAo-HjoxE0zJtCDTL9wEfSUKuW_AqTACLcBGAsYHQ/d/80121029_p0.png'); border: 3px solid #000000; background-size: cover; margin: auto; max-width: 300px; background-position: 50% 50%;"][bg=transparent; background: rgba(153 116 193 / 70%); color: #da7f8f; border: 1px solid #6fa4aa;][comment] Bg Opacity was fix by Low fidelity (I had it in my head it would be 1 to 100; not a .01 to 1)[/comment][border=0; height:150px; width:150px; border:3px solid #da7f8f; background:url('https://i.ibb.co/wy2cb8f/zezzy.png'); background-size:100%; border-radius:40%; margin:auto; padding:0px;][/border][URL='www.CS-LINK-GOES-HERE.COM'][border=0; color: #000000; padding:0; font-weight:bold; font-size:5em; letter-spacing:1px;margin-top:-20px; text-align:center; font-family:'Lovers Quarrel';]Name?[/border][/URL][border=0;box-sizing:content-box;width:93%;height:254px;padding:0px 0;display:inline-block;overflow:hidden; display:flex; flex-direction:column;margin-top:-15px][border=0; height:100%; width:200%; padding:0; overflow-y:scroll;][border=0; font-smoothing:antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;height:auto; text-shadow: 0px 1px 1px #000000; width:50%; padding:0 10px; box-sizing:border-box; font-family:'Azeret Mono'; font-size:13px;text-align:left;color:black; line-height:130%]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[/border][/border][/border][/bg][/bg][bg=transparent; height:10px;width:100%;z-index:6;color: #00000);font-size:10px;text-align:center; position:absolute; top:-10px; left:0; padding:0;][font=Bonbon]coded by Yellow Swan[/font][/bg]
 
You can replace the opacity property with background: rgba(0 0 0 / 50%).

The 0 0 0 is the hex number and the percentage defines how much you want it transparent. The opacity function tends to apply to all child borders, but the background method doesn't and also does not affect text inside that border.
Thank you so much! All my understanding of coding is snippets I have learned in these forums. I did presume that the opacity shouldn't have been able to take over another border's paramotors, but clearly I was proven wrong.

Once again I thank you, and I will be adding you to my 'Users that helped me' list. :)
 

Users who are viewing this thread

Back
Top