How to give text or an image a transparent background using CSS?

Here some content (text AND images) "on top of the transparent background"

Answer by paris ionescu for How to give text or an image a transparent background using CSS?

Here's how I do this (it might not be optimal, but it works):

Create the div that you want to be semi-transparent. Give it a class/id. Leave it EMPTY, and close it. Give it a set height and width (say, 300 pixels by 300 pixels). Give it an opacity of 0.5 or whatever you like, and a background color.

Then, DIRECTLY BELOW that div, create another div with a different class/id. Create a paragraph inside it, where you'll place your text. Give the div position: relative, and top: -295px (that's NEGATIVE 295 pixels). Give it a z-index of 2 for good measure, and make sure its opacity is 1. Style your paragraph as you like, but make sure the dimensions are less than that of the first div so it doesn't overflow.

That's it. Here's the code:

.trans {    opacity: 0.5;    height: 300px;    width: 300px;    background-color: orange;  }  .trans2 {    opacity: 1;    position: relative;    top: -295px;  }  .trans2 p {    width: 295px;    color: black;    font-weight: bold;  }

    
    
    
      
        text text text