How do I make text in div lower opacity in HTML [closed]

Question

How do I lower the opacity of text in div, like so:

Answer 1

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>

Answer 2

Add opacity for parent div and the text inside the div will also carry the opacity. In your example the parent container has background and then then another container inside it with the text with different color, different from div background.

.main {
  width: 350px;
  height: 250px;
  background-image: url(http://i.stack.imgur.com/GgQ5e.jpg);
}
.container {
  opacity: 0.5;
  background-color: black;
  width: 300px;
  height: 200px;
}
p {
  font-size: 100px;
  color: white;
  opacity: .3;
}

<div class="main">
  <div class="container">
    <p>
      TEXT
    </p>
  </div>
</div>