• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4<title>Transparency Examples</title>
5<style type="text/css">
6body {
7font-family: Verdana, Arial;
8}
9img {
10opacity:0.4;
11}
12img:hover {
13opacity:1.0;
14}
15.box_white, .box_black {
16font-size: 14px;
17font-weight: bold;
18text-align: center;
19padding: 10px;
20display: inline-block;
21width: 100px;
22}
23.box_white {
24background-color: white;
25border: 2px solid black;
26color: black;
27}
28.box_black {
29background-color: black;
30border: 2px solid white;
31color: white;
32}
33.box_0 {
34opacity: 1.0;
35}
36.box_25 {
37opacity: 0.75;
38}
39.box_50 {
40opacity: 0.5;
41}
42.box_75 {
43opacity: 0.25;
44}
45.box_100 {
46opacity: 0;
47}
48</style>
49</head>
50<body>
51
52<h1>Image Transparency</h1>
53Hover over an image to make it fully opaque.<br>
54<img src="http://www.w3schools.com/css/klematis.jpg" width="150" height="113" alt="klematis" />
55<img src="http://www.w3schools.com/css/klematis2.jpg" width="150" height="113" alt="klematis" />
56
57<h1>Block Transparency</h1>
58<span class="box_white box_0">White 0%</span> <span class="box_white box_25">White 25%</span> <span class="box_white box_50">White 50%</span> <span class="box_white box_75">White 75%</span> <span class="box_white box_100">White 100%</span>
59<br>
60<span class="box_black box_0">Black 0%</span> <span class="box_black box_25">Black 25%</span> <span class="box_black box_50">Black 50%</span> <span class="box_black box_75">Black 75%</span> <span class="box_black box_100">Black 100%</span>
61
62</body>
63</html>
64