Slide 5.32: CSS image opacity/transparency (cont.)

CSS Image Opacity/Transparency (Cont.)

Example 3: Text in 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. This is some text that is placed in the transparent box.

The source code is listed below:

First, we create a div element (class="background") with a fixed height and width, a background image, and a border.

Then we create a smaller div (class="transbox") inside the first div element. This div also have a fixed width, a background image, and a border. In addition we make this div transparent. Notice that we have added three different syntaxes for the transparency. Inside the transparent div, we add some text inside a p element.

01<html>
02  <head>
03    <style type="text/css">
04      div.background {
05        width: 500px;
06        height: 250px;
07        background: url(klematis.jpg) repeat;
08        border: 2px solid black;
09      }
10      div.transbox {
11        width: 400px;
12        height: 180px;
13        margin: 30px 50px;
14        background-color: #ffffff;
15        border: 1px solid black;
16        filter:alpha(opacity=60);     /* for IE */
17        opacity:0.6;                  /* CSS3 standard */
18        -moz-opacity:0.6;             /* for Mozilla */
19      }
20      div.transbox p {
21        margin: 30px 40px;
22        font-weight: bold;
23        color: #000000;
24      }
25    </style>
26  </head>
27  <body>
28   <div class="background">
29    <div class="transbox">
30     <p>This is some text that is placed in the transparent box.
31      This is some text that is placed in the transparent box.
32      This is some text that is placed in the transparent box.
33      This is some text that is placed in the transparent box.
34      This is some text that is placed in the transparent box.
35     </p>
36    </div>
37   </div>
38  </body>
39</html>

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <style type="text/css"> div.background { width: 500px; height: 250px; background: url(http://undcemcs01.und.edu/~wen.chen.hu/course/260/5/figure/klematis.jpg) repeat; border: 2px solid black; } div.transbox { width: 400px; height: 180px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; filter:alpha(opacity=60); opacity:0.6; } div.transbox p { margin: 30px 40px; font-weight: bold; color: #000000; } </style> </head> <body bgcolor="#EDF3FE"> <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>