Formally it may appertain to a CSS newsgroup, but from the other side
it is *dynamic* plus it is JavaScript based.
Anyway I had a customer who wanted cross-browser full-Aqua (Office XP
style) so I had to hack Opera for it.
This algorithm formally *doesn't* break a single standard, moreover it
works as intended on Opera only (I hope they did not mean *that* as
their official opacity path).
Fill free to use this approach if you need it. (Watch line breaks as
usual).
P.S. I'm currently totally traumatized by transparency, I hate it, hate
it, hate it!
:-| :-)
<html>
<head>
<title>Opera Opacity</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: #FFFFFF;
}
#LoremIpsum {
width: 75%;
font: 1.2em "Times New Roman", serif;
}
#div1 {
left: 20px;
top: 20px;
background-color: #3067C0;
}
..floating {
font: bold small-caps 1em "Times New Roman", Times, serif;
margin: 0px 0px;
padding: 5px 5px;
border: 1px #0000FF solid;
position: absolute;
z-index: 1;
height: 100px;
width: 200px;
}
</style>
<script type="text/javascript">
var bgStart = 'url(data:image/png;base64,';
bgStart+= 'iVBORw0KGgoAAA ANSUhEUgAAAAoAA ';
bgStart+= 'AAKCAYAAACNMs+ 9AAAAFUlEQVR42m M0SD';
var bgEnd = 'AAAAAElFTkSuQm CC)';
var bgGrade = [
'/wn4EIwDiqkL4KAV bbF2f0aBUI',
'/wjIEIwDiqkL4KAX 59Fm2vBnLj',
'9whoEIwDiqkL4K AZ14FWnd9+Mk',
'+wmYEIwDiqkL4K AcUaFG/cP0wP',
'8wk4EIwDiqkL4K AeQVE2sbcbuX',
'9Qz0AEYBxVSF+F AAMfEmebdV9f',
'+QxkAEYBxVSF+F ACrBEW0gimmK',
'/gy0AEYBxVSF+FAF JjEHMGT84i',
'9gzEAEYBxVSF+F AHFeD29qarCb',
'8gyUAEYBxVSF+F AJBZDmtRyGAL',
'none'
];
var trueColor = '#3067C0';
function $(id) {
return document.getEle mentById(id);
}
function init() {
with ($('div1').styl e) {
backgroundColor = 'transparent';
backgroundRepea t= 'repeat';
backgroundImage = bgStart+bgGrade[0]+bgEnd;
}
}
function demo(n) {
$('div1').style .backgroundImag e = (n != 10)?
bgStart+bgGrade[n]+bgEnd : bgGrade[n];
}
window.onload = init;
</script>
</head>
<body>
<p id="LoremIpsum" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<p> </p>
<form method="POST" action="">
<select name="opacity" onchange="demo( this.selectedIn dex)">
<option value="0" selected>opaque </option>
<option value="1">10</option>
<option value="2">20</option>
<option value="3">30</option>
<option value="4">40</option>
<option value="5">50</option>
<option value="6">60</option>
<option value="7">70</option>
<option value="8">80</option>
<option value="9">90</option>
<option value="10">tran sparent</option>
</select>
</form>
<div id="div1" class="floating ">
Lorem ipsum dolor sit amet
</div>
</body>
</html>
