title: How to make a surface background half transparent in jetpack compose, but not the content?
body: <p>I want to achieve this layout:</p>
  <p><a href="https://i.stack.imgur.com/Dn20I.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Dn20I.png" alt="enter image description here" /></a></p>
  <p>In XML I would add an image in a relative layout with match_parent attributes, then a view with a black half-transparent background set to match_parent as well, then the content.</p>
  <p>In compose I made this composeable:</p>
  <pre><code>@Composable
  fun ImageCover(resourceId: Int, alpha: Float = 0.5f, content: @Composable () -&gt; Unit) {
      Box(modifier = Modifier.fillMaxSize()) {
          Image(
              painter = painterResource(id = resourceId),
              contentDescription = null,
              modifier = Modifier.fillMaxSize(),
              contentScale = ContentScale.Crop
          )
          Surface(
              color = Color.Black, modifier = Modifier
                  .fillMaxSize()
                  .alpha(alpha)
          ) {
              content()
          }
      }
  }
  </code></pre>
  <p>But the problem is alpha is applied to the surface and its content. So no matter what I put in the content, even if it's another surface with a background, will also be half transparent. Here, for example, the two sentences and two components at the bottom will be half transparent as well.</p>