Semantic portal
CSS Opacity
CSS Opacity
//First, we create a <div> element (class="background") with a background image, and a border.
//Then we create another <div> (class="transbox") inside the first <div>.
//The <div class="transbox"> have a background color, and a border - the div is transparent.
//Inside the transparent <div>, we add some text inside a <p> element.
Similar pages
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>Transparent Hover Effect
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}The opacity property is often used together with the :hover selector to change the opacity on mouse-over.
Transparent Box
When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency.
This can make the text inside a fully transparent element hard to read.