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