下の曇りガラスの背景にテキストの効果を達成するために、H5小さなプログラム

図影響に示すように

コードは以下の通りであります：

HTML：
 < DIV クラス= "コンテナ" > 
   < IMGのクラス= "メイン-IMG" SRC = "img.jpg"  /> 
   < divのクラス= "ブラーラップ" > 
     < IMG SRC = "img.jpg" > 
   </ DIV > 
   < H4 >タイトル内容タイトル内容タイトル内容タイトルコンテンツ</ H4 > 
 </ DIV >

CSS：
  .container { 
    位置：相対。
    幅：320ピクセル ; 
    高さ：200pxの。
  }

  .main-IMG { 
    幅：100％ 。
    高さ：100％ ;
  }

  .blurラップ { 
    位置：絶対。
    下：0 ; 
    高さ：44px ; 
    幅：100％ ; 
    オーバーフロー：隠されました ;
  }

  .blurラップIMG { 
    位置：絶対。
    下：0 ; 
    幅：320ピクセル ; 
    高さ：200pxの。
    フィルタ：ぼかし（4PX） 。
    変換：スケール（1.2） ;
  }

  H4 { 
    位置：絶対。
    下：0 ; 
    色：#FFF ;
  }

 

キーはバックグラウンド時にバックグラウンド層パケットDIV（ビュー）voerflowコンテナ:!隠し、ときフォアグラウンド2 IMG効果を完了するために使用されます！