CSS Same color for text and background with background opacity

Question

I want to create a table with background color white and opacity with 30%. I can do this with following CSS:

background-color:#ffffff;
opacity:0.3;
height:145px;

But my problem is I want to give the same color (#ffffff) for text as well.But when I change the CSS to:

background-color:#ffffff;
opacity:0.3;
height:145px;
color:#ffffff;

I can not see text in my table.Is there any way to show text color and background color with #ffffff and background opacity with 30%?

So, you want your text to be the same colour as your background, but still be visible? — Ken Herbert, Sep 29 '14 at 23:47
Why would white text, on a white background, in an element that's mostly transparent, be visible at all? — David Thomas, Sep 29 '14 at 23:49
Yes i want text to be the same colour as background and need to visible the text — devuser, Sep 29 '14 at 23:51
Do you have a visual example of the outcome (an image or link, where you might have seen this)? — Chris, Sep 29 '14 at 23:56
No I dont have any visual example. I want to know whether this is possible to do. — devuser, Sep 30 '14 at 00:01

score 1 · Answer 1 · edited May 23 '17 at 11:57

The opacity property is not suited for this kind of problem, because it's automatically inherited by children elements. If a table has 0.3 opacity, all its cells (and their text) becomes equally transparent (details here). To get around this, you'd have to reset the opacity of these children back to 1, but that's a lot more CSS to add.

Instead, let me suggest a couple easy alternatives:

1. Use a semi-transparent PNG image

You can make one at 1x1px.com and download it to your site.

Then reference it using background-image, for example:

background-image:url(path-to-your-image.png);
height:145px;
color:#ffffff;

2. Use CSS3's rgba ability

The rgba ability gives us an easier method, but it is not supported in IE8. If you want to support this browser, use the PNG image technique instead.

The CSS for this technique is:

background-color:rgba(255,255,255,0.3);
height:145px;
color:#ffffff;

See it in action here: http://jsfiddle.net/49d7rxm9/

Answers derived from this post: https://stackoverflow.com/a/806189/2391142

score 1 · Answer 2 · answered Sep 30 '14 at 00:05

While this is technically possible, let me state first up that I do not recommend using this method.

Text should be a significantly different colour to the background to provide enough contrast to be readable. Using this method will provide text that is somewhat readable to your average person with good eyesight, to a reader with poor eyesight this will be somewhere between difficult and impossible to read.

Now on to the how:

You can use a text-shadow behind the text to make text (somewhat) readable on the same colour background.

Something like

text-shadow: 0 0 8px #000;

on the element provides the most legible way of doing this as far as I can tell.

Note that text-shadow is not supported by IE 8 or 9, but will work on all other major browsers.

Yes i know it should be different from background color.but this is requirement for me to do.Any way thanks for the answer. — devuser, Sep 30 '14 at 00:15

score 0 · Answer 3 · answered Sep 30 '14 at 00:00

I think you have to work with gradient background for the table instead! Like that :

table {
  color: white;
  font-size: 20px;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}
body,
html {
  height: 100%;
}
body {
  background: -moz-linear-gradient(to bottom, #FFFFFF, #ffffff);
  background: linear-gradient(to bottom, #FFFFFF, #101010);
}

<table>
  <tr>
    <td>
      <div>Row1 - Cell 1</div>
    </td>
    <td>
      <div>Row1 - Cell 1</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>Row2 - Cell 2</div>
    </td>
    <td>
      <div>Row2 - Cell 2</div>
    </td>
  </tr>
</table>

http://jsfiddle.net/csdtesting/gwccqsh9/

You'll notice that the `background-color` is explicitly *not `white`*, as specified in the question? — David Thomas, Sep 30 '14 at 00:03
Yes i am trying to give altenative because its seems difficult to work like that. Maybe with pseudoelements i am trying now. — Giannis Grivas, Sep 30 '14 at 00:13

score 0 · Answer 4 · answered Sep 30 '14 at 00:04

0

You can use RGBA instead, assuming your body/container background is a darker color.

http://jsfiddle.net/YoshiMaster/kxjezr5e/

div {
  background-color: rgba(255, 255, 255, 0.3);
  color: white;
}

<div>

hello

</div>

answered Sep 30 '14 at 00:04

Charles

427
3
6

CSS Same color for text and background with background opacity

4 Answers4

1. Use a semi-transparent PNG image

2. Use CSS3's rgba ability