/    Sign up×
Community /Pin to ProfileBookmark

Font Color…

Copy linkTweet thisAlerts:
May 27.2004

Is there any way to force Opera to accept a color of “transparent” for fonts?

I have the following:

CSS
———-

p { background-color:#000; color:transparent; }

HTML
———-

<p>This is test</p>

All browsers except for Opera will render the text properly utilizing the “transparent” color, thus making the text “invisible”.

Thanx.

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@ExuroMay 27.2004 — If it doesn't work then it probably isn't going to. You could try setting visibility:hidden; instead, but then the text couldn't be highlighted either...
Copy linkTweet thisAlerts:
@stmasiauthorMay 27.2004 — Yeah...that's the problem. Need to be able to highlight the text and/or apply an anchor to it.

Thanx.
Copy linkTweet thisAlerts:
@KarmaKillsMay 27.2004 — couldnt you just use color: #000?
Copy linkTweet thisAlerts:
@stmasiauthorMay 27.2004 — Yes, if the background was going to stay black.

I am going to be placing a background image and the text needs to be "invisible" on top of it.

Stupid Opera.

:rolleyes:
Copy linkTweet thisAlerts:
@KarmaKillsMay 27.2004 — I've set text to a simular color as the image they were going to be on and then set font size to 1pt. They appear as little dots but if you match the color close enough they dont show up. Used to do it to help with search engine hits heh.

does Opera accept 8 digit color codes? IE uses an extra 2 digits to set opacity. I havent really used it much, but might be worth exploring.
Copy linkTweet thisAlerts:
@stmasiauthorMay 27.2004 — Nah...

Far too many colors on background image to simply set the font to one color.

Thanx.
Copy linkTweet thisAlerts:
@stmasiauthorMay 27.2004 — No hacks or other such "clever" ways to accomplish this, eh?

Bummer.

Thanx.
Copy linkTweet thisAlerts:
@stmasiauthorMay 28.2004 — Cool!!!

Good ol' CSS comes through once again! I figured out a sneaky way around it.

Here's what I was working with:

===============================================

XHTML
----------


<li id="li12"><a href="images.xhtml" title="Shortcut to images...">Images</a></li>

CSS
----------


li#li12 a, li#li12 a:link, li#li12 a:visited { background:transparent url("button-normal.jpg") no-repeat 0% 0%; color:transparent; }

li#li12 a:hover { background:transparent url("button-raised.jpg") no-repeat 0% 0%; color:transparent; }
===============================================



Here's how I made it work:

===============================================

XHTML
----------


<li id="li12"><a href="images.xhtml" title="Shortcut to images..."><span class="hide">Images</span></a></li>

CSS (added)
----------


.hide { visibility:hidden; }
===============================================



So simple...can't believe I didn't think of it. Oh well, at least it validates now (color:transparent wasn't valid) and I'm getting the desired effect.
×

Success!

Help @stmasi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...