I wanted to share this, just in case some of us are still baffled by opacity, and especially with varying browser acceptance. I created a spoof website to tackle the things once and for all. The secret is "rgba" rgb colour plus alpha" Stressing it is a spoof site - no I will never publish it - here is the HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>I Luv Trees</title>
<link href="style1.css" rel="stylesheet" type="text/css"/>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/k9banner.png" width="1100" height="240" alt="" title="" />
<br />
<h2>Navigation Bla bla bla</h2>
<br /><br />
</div><!-- end header div -->
<h1><span style="font-family: 'Arial Black'; font-weight: normal; font-style: normal; text-decoration: none;">ALL ABOUT KEEPING YOUR DOG (AND YOU) FIT</span></h1>
<article class="intro">
<br /><br /><br /><br /><br />
<p class="walkies">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque.
Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue
interdum rutrum. Fusce vel lectus arcu. Quisque quis elit et lorem suscipit faucibus a ut odio. Proin ut ante
consectetur dui mattis pulvinar non quis neque. Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
Mauris sagittis aliquam odio vitae pulvinar. Suspendisse id dolor nibh, sed consectetur sem.
</p>
<br /><br /><br /><br />
<p class="walkiesplus">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque.
Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue
interdum rutrum. Fusce vel lectus arcu. Quisque quis elit et lorem suscipit faucibus a ut odio. Proin ut ante
consectetur dui mattis pulvinar non quis neque. Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
Mauris sagittis aliquam odio vitae pulvinar. Suspendisse id dolor nibh, sed consectetur sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque.
Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue
interdum rutrum. Fusce vel lectus arcu. Quisque quis elit et lorem suscipit faucibus a ut odio. Proin ut ante
consectetur dui mattis pulvinar non quis neque. Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
Mauris sagittis aliquam odio vitae pulvinar. Suspendisse id dolor nibh, sed consectetur sem.
</p>
<br /><br />
</article>
</div><!-- end wrapper div -->
</body>
</html>
/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */
body {
margin: 0;
padding: 0;
background-color: #000000;
font: small arial, sans-serif;
}
#wrapper {
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top:10px;
background-color: #FFFFFF;
}
.intro {
background-image: url(images/wrapperimg.png);
}
h1 {
padding-left: 25px;
padding-top: 3px;
padding-bottom: 3px;
color: #FF0000;
background-color: #FFFF00;
font-size: 2.4em;
font-weight: bold;
}
.walkies {
background-color: #C0C0C0;
width: 600px;
font-size: 1.2em;
padding-top: 15px;
padding-left: 30px;
padding-right: 20px;
padding-bottom: 20px;
margin-left: 25px;
margin-top: 30px;
margin-bottom: 70px;
}
.walkiesplus {
width: 900px;
padding-left: 30px;
padding-bottom: 20px;
padding-top: 20px;
margin-left: 25px;
background-color: rgba(255,246,0,.5);
filter: alpha(opacity=20);
}
I hope you can see the two images, I can never get used to the interface on CC forums
It solves a problem of semi transparent background colours, without losing the opacity of the text. It also seems to work on IE, although the filter (bottom line in the CSS page is apparently important. I understand that the filter code will not validate, but what the hell, it does not interfere with other browsers. Now I will probably hear that you all knew this and my bubble will be burst.
Good luck
tonethemoan
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
I'm sure it will come in handy for a number of people. Certainly not everyone will have been aware of this.
