僅使用CSS和HTML創建透明圖像

Question

是否可以通過CSS/HTML僅在沒有JavaScript的情況下創建此圖像？因爲內容是動態的而圖像是透明的。

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。

濾波器：α（不透明度= 0.001）;對於即/ * */

不透明度：0.001;