jquery - CSSとHTMLのみで透明な画像を作成する

Question

JavaScriptなしでCSS/HTMLのみでこの画像を作成することは可能ですか？コンテンツは動的で、画像は透明だからです。

Answer 1

画像をレイヤーに分割しました。

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 2

はい、HTMLとCSSを使用して投稿したものを作成するために、複数の画像を積み重ねることができます。

不透明効果を得るには、

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

Answer 3

コンテンツを動的にロードする必要がある場合は常に、JavaScriptを使用してそのコンテンツにアクセスする必要があります。あなたの場合、画像が静的である場合、それはcssとhtmlで行うことができ、コンテンツをロードするにはjavascriptを使用する必要があります。

フィルタ：alpha（opacity = 0.001）; / * for ie * /

不透明度：0.001;