(忽略图大小不一致,一般UI给的图会刚好适合页面大小,我这网上找的图,难调大小,我行内的就自己随便写的宽高),另外悄悄告诉你最后有简单方法~~
先来看看初始DOM结构代码
222 333 5555
最开始图片在他本来的DOM结构里面,爷爷也没有背景,这样的DOM是把两个叔叔抵下去的
假设我们已经固定了图片为孙子,但是我们想要这个图片作为整个爷爷的背景图,想要其他该在爷爷上边的元素的层级不变,也就是这样的DOM结构:
效果是这样
话不多说,直接上代码:(这里要通过img的class获取爷爷元素,所以用v-show当满足某种条件才渲染这种我需要的样式,倘若知道爷爷元素和图片的大小直接v-if
222 333
TIPS:有个简单单方案就是直接给parent加一个margin-bottom!!