Digital background abstract power point templates themes and backgrounds ppt layouts
Web Design Transparent Backgrounds. Why : Allow text to appear clearly above a graphic background...
-
Upload
george-dickerson -
Category
Documents
-
view
213 -
download
0
Transcript of Web Design Transparent Backgrounds. Why : Allow text to appear clearly above a graphic background...
![Page 1: Web Design Transparent Backgrounds. Why : Allow text to appear clearly above a graphic background image that still can be seen in the background. Without.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649dc75503460f94abb937/html5/thumbnails/1.jpg)
Web Design
Transparent Backgrounds
![Page 2: Web Design Transparent Backgrounds. Why : Allow text to appear clearly above a graphic background image that still can be seen in the background. Without.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649dc75503460f94abb937/html5/thumbnails/2.jpg)
Why : Allow text to appear clearly above a graphic background image that still can be seen in the background .
Without Transparency With Transparency
![Page 3: Web Design Transparent Backgrounds. Why : Allow text to appear clearly above a graphic background image that still can be seen in the background. Without.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649dc75503460f94abb937/html5/thumbnails/3.jpg)
How the technique works
I. Insert a container div that has your picture as a background image.
II. Insert a nested div smaller than the container. (Trans Div)
III. Style the Trans div to be partially transparent.
IV. Type your text using a color that provides high contrast with the image below.
![Page 4: Web Design Transparent Backgrounds. Why : Allow text to appear clearly above a graphic background image that still can be seen in the background. Without.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649dc75503460f94abb937/html5/thumbnails/4.jpg)
The HTML Body Code
• <div class="container" style= background-image: url('cptrees.jpg‘); >
• <div class="transbox">Here enter your content: paragraphs, lists, tables etc </div> /* End transparent div */</div> /* End container div */
![Page 5: Web Design Transparent Backgrounds. Why : Allow text to appear clearly above a graphic background image that still can be seen in the background. Without.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649dc75503460f94abb937/html5/thumbnails/5.jpg)
The Embedded Style Code for the Trans Div
• <head> ….<style type="text/css"> div.transbox /*
• {• width: 500px;• height: 418px;• background-color: #c3a342; /* color of the transparent box (div) */• border: 1px solid black;• /* for IE */ filter: alpha(opacity=80); /* CSS3 standard */;• opacity: 0.80;• margin-top: 100px;• margin-left: 250px;• }• div.transbox p• {• margin:0px 40px;• font-weight:bold;• color:#000000; /* text will be black */• }• </style>
</head>