可以仅使用CSS/HTML创建此图像而不使用JavaScript吗?因为内容是动态的,图像是透明的。
使用HTML和CSS,您可以将多个图像叠加在一起,创建您发布的效果。
要获得透明度效果,请使用
.opacity40 {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
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);
}
filter: alpha(opacity = 0.001);/* 适用于ie */
opacity: 0.001;