We would like to know how to create Transparent image with underlying background.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.image-wrapper {<!-- w w w . j a v a 2s.co m-->
display: inline-block;
background: url(http://placehold.it/50x50) repeat;
}
.image-wrapper img {
vertical-align: top;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="image-wrapper">
<img src="http://placehold.it/300x200" height="200" width="300" />
</div>
</body>
</html>
The code above is rendered as follows: