Last updated on November 22nd, 2024 at 01:20 pm

This script creates a box with a transparent background using CSS, overlaying it on a background image or color.

There are essentially two div elements: one with a width of 600 pixels and another smaller one measuring 500 pixels. The smaller div contains text that possesses an alpha property, which can be adjusted at any time by altering the CSS section of the script provided below. For further information, please refer to the demo.

The source code looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transparent Box Using CSS</title>
<style>
/* Background container */
div.background {
  width: 100%;
  max-width: 600px;
  height: 250px;
  background: #777 no-repeat center;
  background-size: cover;
  border: 2px solid black;
  margin: 0 auto;
  position: relative;
}

/* Transparent box */
div.transbox {
  width: 90%;
  max-width: 500px;
  height: auto;
  margin: 30px auto;
  background-color: rgba(255, 255, 255, 0.6); /* Transparent background */
  border: 1px solid black;
  padding: 20px;
}

/* Text inside the transparent box */
div.transbox p {
  margin: 0;
  font-weight: bold;
  color: #000000; /* Opaque text */
}
</style>
</head>
<body>
<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.</p>
  </div>
</div>
</body>
</html>

Once this is loaded on a browser you will see:

  1. A centered box with a transparent background overlaying an image or color.
  2. Bold, black text that remains fully opaque.
  3. The design adjusts gracefully on different screen sizes.

DEMO