Rocksolid 5V Rocksolid 5V - 1 month ago 6
CSS Question

How can I create transparent divs that have a picture as background on an otherwise black background?

I want to recreate an interface similar to Windows Phone 10.

You can see an example of what I try to achieve in HTML in this picture:



The middle tiles act like Windows on the baby picture while the space between tiles is black.

Answer

There's no magic going on here. In the picture you've supplied the phone has a desktop of a child that is letterboxed (black stripe across top and bottom). The tiles on the top and bottom of the screen are opaque and show their own backgrounds. The tiles in the middle are fully transparent, but have a solid black border to them to show the child behind them.

To make the tiles, you simply need this:

 .tile { background-color:rgba(0,0,0,0); 
         border: 3px solid black;
  }

Take a look at this fiddle for a basic example: https://jsfiddle.net/Lnafvvx9/6/