CSS, Transparent Text with Opaque Background

Making text background transparent but not text itself

Don't use opacity for this, set the background to an RGBA-value instead to only make the background semi-transparent. In your case it would be like this.

.content {
    padding:20px;
    width:710px;
    position:relative;
    background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
    background: rgba(204, 204, 204, 0.5);
}

See http://css-tricks.com/rgba-browser-support/ for more info and samples of rgba-values in css.

How to change text transparency in HTML/CSS?

opacity applies to the whole element, so if you have a background, border or other effects on that element, those will also become transparent. If you only want the text to be transparent, use rgba.

#foo {
    color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0.5);

    font-size: 16pt;
    font-family: Arial, sans-serif;
}

Also, steer far, far away from <font>. We have CSS for that now.

Transparent text cut out of background

It's possible with css3 but it's not supported in all browsers

With background-clip: text; you can use a background for the text, but you will have to align it with the background of the page

body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}
span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

<h1><span>ABCDEFGHIKJ</span></h1>

transparent text but opaque background in css

I found an answer for my question here:
https://codepen.io/zFunx/pen/EbOQow

body {  padding: 0;  margin: 0;  height: 100%;}.overlay {  background: url(https://web.opendrive.com/api/v1/download/file.json/NTlfMTM2NDExNjNf?inline=1);  height: 100%;  position: relative;  background-size: cover;}.overlay h1 {  position: absolute;  background-color: #000;  color: #fff;  mix-blend-mode: multiply;  text-align: center;  font-size: 3em;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

<div class="overlay">  <h1>Mix-Blending in CSS</h1></div>

CSS opacity only to background color, not the text on it?

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

rgba(R, G, B, A)
R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).
RGBa example
background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

A small example showing how rgba can be used.

As of 2018, practically every browser supports the rgba syntax.

HTML/CSS: See Through Background Text?

One way is to use -webkit-background-clip: text;: demo here (webkit only obviously).

Using position, we can sync both backgrounds:

#container, #container h1 {
    background: url(bg.png)
}

#container {
    position: relative;
}

#container #gray {
    background: rgba(0,0,0,.8);
    padding-top: 8em;
}

#container h1 {
    font-size: 8em;
    padding-top: /* padding + border of div */;
    position: absolute;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

Or you could use the same approach and apply a svg mask, that will work in all modern browsers.

How do I give text or an image a transparent background using CSS?

Either use a semi-transparent PNG or SVG image or use CSS:

background-color: rgba(255, 0, 0, 0.5);

Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).

Beware that the text still needs sufficient contrast with the background, once the underlying background shines through.

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

Making transparent text in CSS and fitting background image inside a text shape

Try this:

element.style {
    color: rgba(0,0,0,0.0); /* for transparent color */
    -webkit-text-stroke: 1px rgba(0,0,0,1.0); /* for solid black outline */
}

UPDATED

If you need background image though the text:

.bg-though-text {    font-size: 50px;    font-weight: 700;    text-transform: uppercase;    background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6); /* Here you can use an image bg */      /* This will start the magic */
    -webkit-background-clip: text; /* This will bring bg shape according to text*/    -webkit-text-fill-color: transparent; /* This will make text color transparent */    color: rgba(0,0,0,0.0); /* This will make text color transparent for sure */}

<p class="bg-though-text">Gradient bg</p>

How to make text in transparent div opaque?

The issue with your approach is that you're changing the opacity for the entire containing element—including its children.

Instead of changing the opacity of the containing element to affect its background opacity, try changing the alpha of its background color. This requires you to convert your color from hex to rgba format (tools are available online for doing so). Here is an example with a black background with an opacity of 50%:

.navbar-fixed-top {
    background-color: rgba(0,0,0,.5);
    ...
}

At this point, your immediate problem would be solved, but you could also change the opacity or alpha of the elements inside of your container and see the effects if you wanted:

.navbar-fixed-top a {
    color: rgba(0,0,0, .8);
}

How to create transparent text on non-transparent background

You can use SVG to create a mask with a rect element for the white background and a text element for transparent text part.

body {  margin: 0;  padding: 0;  display: flex;  align-items: center;  justify-content: center;  background: url('http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg');  background-size: cover;  height: 100vh;  background-position: center;  font-family: 'Open Sans', sans-serif;}
svg {  width: 300px;  height: 100px;}svg text {  text-anchor: middle;}svg #overlay {  fill: white;  opacity: 0.7;}svg #text {  font-size: 40px;  font-weight: bold;}
svg #r {  fill: white;  mask: url(#mask);}

<svg>  <defs>    <mask id="mask" x="0" y="0" width="100%" height="100%">      <rect id="overlay" x="0" y="0" width="100%" height="100%" />      <text id="text" x="50%" y="0" dy="65px">Some text</text>    </mask>  </defs>  <rect id="r" x="0" y="0" width="100%" height="100%" /></svg>