easyui實現背景圖片半透明狀態，懸浮在大背景之上

首先是查找素材，使用AI將所需要的圖案畫出來，切記將圖案的背景設置為所需要的透明狀態。項目使用的是easyui架構

為啥加兩個背景圖呢，因為這樣的布局最開始是給一個矩形框加上的背景圖片，若是還使用矩形框，則實現透明狀態的效果就無法實現，這樣加上背景也就毫無意義。
其次：也是最主要的一個步驟，至少需要里外兩層div,且兩層都需以背景圖片的方式加上制作好的背景圖片。當然效果是兩個背景圖重疊，且錯開一丟丟。若想要兩個背景圖片完全重合，幾乎不可能實現，但是 若將其中一個的背景圖片完全透明就能實現了。

布局很簡單：

<div id="layout_header" class="layout_header">
 <img class="logo-img" style="width:50px;height:auto;" src="../images/logo.png">
  <div class="title">
      <a class="cn" href="#">XXXXXX管理系統<br>XX visual management system</a>
     </div>
      <ul class="">
           <li>
         <link-button
                     :id="objs.pw_bt.id"
                     :text="objs.pw_bt.text"
                     :options="objs.pw_bt.options"
                     :fn="objs.pw_bt.fn"
          ></link-button>
         </li>
          <li><a href="#">admin</a></li>
     </ul>
</div> 

需要注意的是VUE渲染出來的外層的div要打開瀏覽器F12才能看出來，在這里里層的div就是layout_header，我的做法是將最外層的div加上完全透明的背景圖片，這樣就能實現兩個背景圖只顯其中一個了。

里層的背景樣式：（圖片半透明狀態）

.layout_header{
background: url("../../images/header_bg.png" )no-repeat ;
background-size: 100%;
}

外層的背景樣式：（圖片全透明狀態）

.panel.window.panel-v2 {
background: url("../../images/header2.png" )no-repeat ;
background-size: 100%;}