Covering a Web Page with a Semi-Transparent Color Curtain

Mastering CSS3 - Part 11

Forward: In this part of the series, we learn how to cover a web page with a semi-transparent color, preventing the user from interacting with the elements under the color.

By: Chrysanthus Date Published: 25 Jul 2012

Introduction

This is part 11 of my series, Mastering CSS3. In this part of the series, we learn how to cover a web page with a semi-transparent color, preventing the user from interacting with the elements under the color. Under this condition, the user cannot even select the text under the cover (color). I assume you have read the previous parts of the series before reaching here; this is a continuation.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

Strategy
A div element at the fixed position with 100% width and 100% height will be placed in front of all normal elements. This div element will have a high z-index integer, which you think, no normal element can have. This div element will have a background color that is semi-transparent. The top-left corner of the div should be at css, “left:0px; top:0px;”. That is all you have to do. Remember that with fixed position, 100% width means 100% width of the screen client area, and 100% height means 100% height of the screen client area.

Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>
    <div style="position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:20;

background-color:rgba(0,255,255,.5)"></div>
    <p>text text text text text text text</p>
    <a href="www.somesite.com">A hyperlink</a>
</body>
<html>

If you tried the code, you would have noticed that you could not select the paragraph text or even click the hyperlink. Note that, here we are dealing with RGBA and not RGB for the color. In the code, the semi-transparency is from rgba(0,255,255,.5) with the value of 0.5 at the end. The higher this value the less transparent (more opaque) is the curtain (div background color). For example, a value of 0.8 makes it less transparent and a value of 0.2 makes it more transparent. You can retry the code with these new values.

Covering a page with a Semi-Transparent Image
Covering a page with a semi-transparent image follows the same principles as with the semi-transparent color. However, this time, instead of using a semi-transparent color background for the div element cover, you use a semi-transparent image (repeating). Do not use a GIF image. You can use a jpg or png image. Read and try the following code with a background image of your choice:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>
    <div style="position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:20; background-image:url(pic.png); background-repeat:repeat"></div>
    <p>text text text text text text text</p>
    <a href="www.somesite.com">A hyperlink</a>
</body>
<html>

After learning ECMAScript you will know how to cover a web page and remove the cover, while the user is viewing the page.

Well, that is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Covering a Web Page with a Semi-Transparent Color Curtain

Mastering CSS3 - Part 11

Introduction

Related Links

Comments