Create a transparent image with CSS and HTML only

Question

Is it possible to create this image only using CSS / HTML, without JavaScript? Because the content is dynamic and the image is transparent.

Answer 1

You have divided the image into layers:

• Color background
• White layer with a transparent circle.
• Eye and other icons to place inside the circle

It might look something like this:

HTML:

<div class="colorful-box"> <div class="box-with-circle"> <span class="eye icon"/>Lorem Ipsum With eye </div> </div> <div class="colorful-box"> <div class="box-with-circle"> <span class="ear icon"/>Lorem Ipsum an ear instead </div> </div> 

CSS

 .colorful-box{ background: url(link-to-the-colorfull-background.jpg); width: 400px; height: 100px; float: left; } .box-with-circle{ background: url(white-box-with-transparent-circle.png); margin: 10px; width: 380px; height: 80px; float: left; } .icon{ width: 80px; height: 80px; float: left; position: realtive; top: 80px; /*Make it fit inside circle*/ left: 80px; /*Make it fit inside circle*/ } .eye{ background: url(transparent-eye.png); } .eye{ background: url(transparent-ear.png); } 

Answer 2

Yes, you can stack multiple images on top of each other to create what you placed using HTML and CSS.

To get an opacity effect, use

 .opacity40 { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } 

Answer 3

Whenever you need to dynamically load content, you must use javascript to access that content. In your case, if the image is static, this can be done using css and html, and you must use javascript to load the content.

filter: alpha (opacity = 0.001); / * for ie * /

opacity: 0.001;