SitePoint Sponsor |
|
User Tag List
Results 1 to 20 of 20
Thread: Opacity color by code
-
May 28, 2007, 09:53 #1
- Join Date
- Jan 2001
- Location
- earth
- Posts
- 501
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Opacity color by code
Hello all.
What I am looking for?
- I've a background image and the text is to be written in a table with a grey color background.
But this grey color should have an opacity, because I want the background image to be seen.
How can I do this without an image and without using Flash? I don't know how.
Thank you for your help.
-
May 28, 2007, 10:08 #2
The best way would be a PNG using Alpha channels. It would also be the less headache way then trying to work with opacity in CSS.
-
May 28, 2007, 10:21 #3
- Join Date
- May 2007
- Location
- Hollywood, FL, USA
- Posts
- 129
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just remember, IE6 and under don't support PNG's Alpha channel, without some Javascript work-arounds. And even then, It doesn't work if the image is defined as a background through CSS.
Life would be so much easier if we
could just look at the source code.
-Dave Olson
-
May 28, 2007, 10:38 #4
- Join Date
- Jan 2001
- Location
- earth
- Posts
- 501
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hmm... I don't want to use an image. Maybe I am going to find how to do it in CSS?
The only image here must be the background.
Thank you
-
May 28, 2007, 14:20 #5
well to do it with CSS you need to add an extra div before or after the table and shim it under the table.
Otherwise if you set the opacity on the table it will make every thing transparent including the text.
Sure you still want to do it with just CSS?
-
May 28, 2007, 14:27 #6
- Join Date
- Jan 2001
- Location
- earth
- Posts
- 501
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I've to try.
If I can't I will not used a transparent item, it will be opaque.
Thank you!
-
May 28, 2007, 15:38 #7HTML Code:
<table>...</table> <div class="opacityshim>...</div>
Code:.opacityshim { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; background-color: #000; }
-
May 30, 2007, 09:42 #8
- Join Date
- Jan 2001
- Location
- earth
- Posts
- 501
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
logic_earth,
Many thanks for your help. I'm going to try it.
-
Jun 4, 2007, 16:36 #9
- Join Date
- Jan 2001
- Location
- earth
- Posts
- 501
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You're the ONE. It works!! Thank you.
-
Jun 13, 2007, 12:52 #10
- Join Date
- Jan 2001
- Location
- earth
- Posts
- 501
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Here I am again. : )
Please have a look to the result Here
Is it possible to put images and text with no opacity?
I tried using Z-Index:
Code:div.A { width: 405px; border: 0px; position:absolute; top: 100px; left: 115px; height: 352px; filter:alpha(opacity=50); -moz-opacity: 0.7; opacity: 0.7; background-color: #ccffff; color:#000000; padding: 10px; z-index: 1; } .middle { display: table-cell; (this is to center the image, something I also can't solve.) vertical-align: middle; position: static; z-index: 2; }
Thank you.
Last edited by magi; Jun 13, 2007 at 13:39.
-
Jun 14, 2007, 17:30 #11
- Join Date
- Jan 2001
- Location
- earth
- Posts
- 501
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It's solve!!
-
Jun 16, 2007, 06:45 #12
- Join Date
- Jan 2001
- Location
- earth
- Posts
- 501
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well, back in town.
At Safari it seems it doesn't work, people don't see anything.
I've read this:
Safari and Mozilla
These browsers support opacity. It requires a fraction value, percentages are not allowed.
The code is what you gave me and works fine at IE and FF.
If you can help me again please check it here.
-
Jun 16, 2007, 07:43 #13
- Join Date
- Oct 2004
- Location
- NSW Australia
- Posts
- 3,564
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Win Safari beta is showing the opacity, but the content is right up at the top of the screen and only the bottom half of that shows ...... I'd hazzard a guess that this is not the way it is being seen on Mac ....
NadiaUnique CSS Templates by Nadia
Dreamweaver: Tutorials.Templates.CSS Designs
SitePoint Books |My Fireworks Tutorials 1 2
Follow me on Twitter | Community Team Advisor
-
Jun 16, 2007, 07:54 #14
- Join Date
- Jan 2001
- Location
- earth
- Posts
- 501
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Jun 16, 2007, 08:17 #15
- Join Date
- Oct 2004
- Location
- NSW Australia
- Posts
- 3,564
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It will have to be tomorrow sometime though - it's after 1am here and I need some sleep :-)
I'm talking about the beta version of Safari for windows - no Safari on a Mac.... so I wouldn't be too worried about it if it looks ok on your Mac!
NadiaUnique CSS Templates by Nadia
Dreamweaver: Tutorials.Templates.CSS Designs
SitePoint Books |My Fireworks Tutorials 1 2
Follow me on Twitter | Community Team Advisor
-
Jun 16, 2007, 08:25 #16
- Join Date
- Jan 2001
- Location
- earth
- Posts
- 501
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You're very nice.
Well, I have PC and I also have try install twice Safari demo and I can't see the File Menus, and the bar address not working. That's why I came here, because the client has MAC and said that don't see none.
Thank you!
-
Jun 16, 2007, 09:06 #17
-
Jun 16, 2007, 09:12 #18
- Join Date
- Jan 2001
- Location
- earth
- Posts
- 501
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Jun 16, 2007, 23:46 #19
- Join Date
- Oct 2004
- Location
- NSW Australia
- Posts
- 3,564
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok, here you go - I've put your page through browsercam.com and here's a heap of snapshots from both Win and Mac, their various browers.
You certainly do have a problem with the 'real' safari by the looks of things.
These sites may help with 'bugs'....
http://www.quirksmode.org/
http://www.positioniseverything.net/
NadiaUnique CSS Templates by Nadia
Dreamweaver: Tutorials.Templates.CSS Designs
SitePoint Books |My Fireworks Tutorials 1 2
Follow me on Twitter | Community Team Advisor
-
Jun 17, 2007, 00:44 #20
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
Depending on which version of Safari you might need
-khtml-opacity: 0.7;
which was the one of the four opacity variants left out of the preceding code.Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
Bookmarks