Text in Transparent Box

First, we create a <div> element (class="background") with a background image, and a border. Then we create a second <div> (class="transbox") inside the first <div>. The <div class="transbox"> has a background color, and a border, both made transparent. Inside the transparent <div> element, we add text inside a <p> element:

HTML file: Displayed by browser:
<style>
div.background {
     background: url(../html_beg/images/klematis_small.jpg) repeat;
     border: 2px solid black;
}
div.transbox {
  margin: 30px;
     background-color: #ffffff;
    border: 1px solid black;
     opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
     margin: 5%;
     font-weight: bold;
     color: #000000;
}
</style>
<body>
<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>
</body>

This is some text that is placed in the transparent box.

Back button Table of Contents Next button