只用CSS和HTML创建透明图像

Question

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

- a.aitboudad

---

图片中的文本是实际文本，还是图片本身的一部分？如果是文本，您能否发布一些标记以供我们使用？如果可能的话，您可以提供您正在处理的图像或演示链接吗？ - David Thomas

Answer 1

使用HTML和CSS，您可以将多个图像叠加在一起，创建您发布的效果。

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

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

- Philip Kirkbride

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);
}

- user920041

---

但如果文本超出了块，文本背景将不再是圆形框盒，而是彩色框盒！！！ - a.aitboudad

Answer 3

无论何时需要动态加载内容，您必须使用JavaScript来访问该内容。如果图像是静态的，则可以使用CSS和HTML进行操作，而要加载内容，则必须使用JavaScript。

filter: alpha(opacity = 0.001);/* 适用于ie */

opacity: 0.001;

- Ram

---

你能给我这些东西提供一些例子吗？ - a.aitboudad

<style> span img{ filter:alpha(opacity=0.001); opacity:0.001; } </style> <div><span><img src="example.jpg"></span><span>样本文本</span> </div> <script type="text/javascript"> $("span").eq(1).text("动态文本"); </script> - Ram