CSS - Opaque Text on Low Opacity Div

CSS - Opaque text on low opacity div?

Set the opacity on the background rather than the element.

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

A while ago I wrote about how to achieve this in a backwards compatible way.

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.

how to have an opacity:1 text in an opacity:0.5 div

Set the background color of the parent using rgba (includes alpha transparency). Example:

.Container {
    background-color:rgb(0,0,0); /* fallback for IE 8 and below */
    background-color:rgba(0,0,0,0.5);
}
.Text {
    color:rgb(255,255,255);
}

This sets the opacity of the background of the container when using colors, however it does not set the opacity of the children. If you need to do that, set the opacity of the children to whatever you'd like with another class:

.OtherChildItem {
    opacity:0.5;
    filter:alpha(opacity=50); /* IE 8 and below */
}

If you want to use a background-image, just set the opacity on the image itself (use a PNG).

How do I make text in div lower opacity in HTML

The CSS mix-blend-mode property will give you the effect you're looking for (it can't be achieved using only opacity). SVG is not required if you don't need Internet Explorer support. This solution is compatible with Chrome, Firefox, Safari, Opera, and others (see the compatibility table here).

Live Demo:

html, body {

  margin: 0;

}

.mix {

  position: absolute;

  top: 0;

  left: 0;

  width: 140px;

  height: 100px;

  font-size: 80px;

  color: white;

  padding: 20px;

  margin: 10px;

  background-color: black;

  mix-blend-mode: multiply;

  opacity: 0.8;

}

<img src="http://i.imgur.com/5LGqY2p.jpg?1">

<div class="mix">

Text

</div>

Opacity of background-color, but not the text

Use rgba!

.alpha60 {
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

In addition to this, you have to declare background: transparent for IE web browsers, preferably served via conditional comments or similar!

via http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

transparent div over an image but opaque text

change the background of .hilight to rgba(0,0,0,0.65) and remove the opacity.

.hilight {
 background-color: rgba(0,0,0,0.65);
 position: absolute;
 height: 85px;
 width: 415px;
 font-family: Verdana, Geneva, sans-serif;
 color: #FFF;
 bottom: 0px;
 z-index: 1;
}

---

Related Topics