ET710
Transparency Lab
In this lab we explore the code used to apply a transparent layer above a body
background image. Overview: a background image will be centered in the body; a
div will be inserted and styled with height, width, margins and padding and it will
be made to appear partially transparent so that the text in this div can be read
above the body background image.
Reference URL: http://www.professorbrian.com/translab.html
1) Choose a background picture with a width/height of 1024 x 768 or smaller.
2) Open EW and create a new site named trans.
3) Open default.html.
4) Style the body to have a centered, non-repeating background image.
In codeview it will look like this:
body {
background-color: #008000;
background-image: url('trees.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; }
5) Insert a div.
6) Assign it an id of transbox.
7) Style it with a height, width, margin and padding and transparency.
In codeview it will look like this:
div#transbox
{
width: 600px;
height: 500px;
background-color: #c3a342;
border: 1px solid black;
/* for IE */
filter: alpha(opacity=70); /* CSS3 standard */;
opacity: 0.70;
margin-top: 100px;
margin-left: auto;
margin-right:auto
}
div#transbox p
{
font-weight: bold;
color: #000000;
padding-left: 6px;
padding-right:6px
padding-top: 4px;
}
{
width: 500px;
height: 418px;
background-color: #c3a342;
border: 1px solid black;
/* for IE */ filter: alpha(opacity=80); /* CSS3 standard */;
opacity: 0.80;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
}
div.transbox p
{
margin:0px 40px;
font-weight:bold;
color:#000000;
}
8) Inside the trans div add a paragraph(s) with text (an essay, a poem etc.)
9) Save and preview in browser
Modify and settings that enhance your design: width and height,
body background color, transbox background color (or try #000000).
Border, opacity settings etc.
10) Log onto Server. Create a new folder named trans. Publish this project to the trans folder.
Link to it from your class homepage.