4

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

在此处输入图像描述

4

3 回答 3

2

是的，您可以将多个图像堆叠在一起，以使用 HTML 和 CSS 创建您发布的内容。

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

.opacity40 {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
于 2012-06-04T13:57:53.267 回答
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);
}
于 2012-06-04T14:07:13.883 回答
0

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

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

不透明度：0.001；

于 2012-06-04T14:02:20.230 回答