How do I prevent some text from getting transparent along with the div it is in.
<p>So, I learnt about opacity and all and then started experimenting, I wanted to put an image as a background and then use div's with a white background to type in, but I wanted them a little transparent so I could still see the background a little. When I tired it I noticed that the text inside the div is getting transparent along with the white div.
What I first tried was putting the text in a paragraph and then in the div but again it went transparent.</p>

<p>Here's the code: </p>

<p>CSS:</p>

<pre><code>body {
        background-image: url("URL here");
      }

div {
width: 300px;
height: 300px;
background-color: white;
opacity: 0.4;
margin: auto;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div&gt;
Hello everyone!
&lt;/div&gt;
</code></pre>

<p>And here's what I'm talking about: <a href="https://jsfiddle.net/jnzjuo0x/" rel="nofollow">https://jsfiddle.net/jnzjuo0x/</a></p>