仅使用CSS和HTML创建透明图像

Question

是否可以仅使用CSS / HTML创建此图像，而不使用JavaScript？因为内容是动态的，图像是透明的。

Answer 1

是的，您可以将多个图像堆叠在一起，以创建使用HTML＆amp; CSS。

要获得不透明效果，请使用

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

Answer 2

您已将图片拆分为多个图层：

1. 丰富多彩的背景
2. 带有透明圆圈的白色图层
3. 放入圈内的眼睛和其他图标

看起来像这样：

<强> 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 3

每当您需要动态加载内容时，您必须使用javascript来访问该内容。在你的情况下，如果图像是静态的，可以使用css和html完成，并且要加载内容，你必须使用javascript。

filter：alpha（opacity = 0.001）; / *表示ie / /

不透明度：0.001;