easyui实现背景图片半透明状态，悬浮在大背景之上

Posted 2021-01-02 lindablog

首先是查找素材，使用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%;}