html - Vue3当重叠设置为隐藏时，将重叠的图像被推到彼此之上

Question

我有一个名为 background 的组件，我用它来以随机顺序渲染点和破折号的背景，这些点和破折号是用 v-for 循环渲染的，这意味着因为破折号比点大，所以有一些重叠。我决定通过在 CSS 中将重叠 x 和重叠 y 设置为隐藏来解决这个问题，但不是仅仅切断任何超出页面边缘的图像，而是将它们压回到页面上导致重叠。

如何阻止图像被压回到页面上？

背景.vue

<template>
    <div class="flex column" style="width: 100%; height: 100%; position: absolute">
        <div v-for="index1 in 18" :key=index1 class="flex" style="margin: 2.5px">
            <div v-for="index2 in 25" :key=index2 style="margin-left: 2.5px; margin-right: 2.5px">
                <img v-bind="{src: randomShape(), width: size}" style="height:50px;">
            </div>
        </div>        
    </div>
</template>

<script>
export default {
    data() {
        return{
            size: 50
        }
    },
    methods: {
        randomShape(){
            if (Math.random(0,1) >= 0.5){
                this.size = 50;
                return 'dot.svg'    
            }
            this.size = 150;
            return 'dash.svg'
        }
    }
}
</script>

标签： htmlcssvuejs3