Page Widget How to - Create a transparent background

Question

We would like to know how to create a transparent background.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.wrapper {<!--from   w w  w .ja va 2s  .  c o  m-->
  position: relative
}
.desc, .transparentBG {
  position: absolute;
  width: 166px;
  height: 60px;
  top: 20px;
  left: 20px;
  padding: 10px;
  color: #FFF;
}
.transparentBG {
  filter: alpha(opacity = 60);
  opacity: 0.6;
  background: #000;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
</style>
</head>
<body>
  Something before the image
  <div class="wrapper">
    <img src="http://placehold.it/100x800"
      width=575 height=431 />
    <div class="transparentBG"></div>
    <div class="desc">This is my text about my image</div>
  </div>
  Something after the image
</body>
</html>

The code above is rendered as follows: