Making a background image transparent without changing the rest of the div
<p>I have a div with a background color and a background image. The div calls this class:</p>

<pre><code>.cakebg {
  background-color: #F8BBD0;
  background-image: url(img/cake.png);
  background-size: 25%;
  background-position: right top;
  background-repeat: no-repeat;
}
</code></pre>

<p>I am trying to make only the image somewhat transparent. I tried this:</p>

<pre><code>.cakebg {
  background-color: #F8BBD0;
  background-image: url(img/cake.png);
  opacity: 0.6;
  background-size: 25%;
  background-position: right top;
  background-repeat: no-repeat;
}
</code></pre>

<p>But that makes the entire div transparent.</p>

<p>So I tried this:</p>

<pre><code>.cakebg {
  background-color: #F8BBD0;
  background-image: url(img/cake.png) opacity(0.6);
  background-size: 25%;
  background-position: right top;
  background-repeat: no-repeat;
}
</code></pre>

<p>But that makes the image disappear entirely. Can this be done?</p>