使用背景图像时图像边缘清晰：url()

Question

下图显示了比前景稍亮的边缘，我希望将其删除。

我目前正在添加背景属性，用于与线性渐变一起显示图像，但是有一条小线沿着 div 的边缘延伸，显示图像。图像上方的灰色 div 是标题，也是屏幕宽度的 100%，应该覆盖整个图像，但线条仍然显示。有什么想法吗？ :=)

---

Vue 组件

<template>
    <BasicContainer>
        <ContentContainer>
            <p v-for="i in 50">Hello</p>
        </ContentContainer>
    </BasicContainer>
</template>

<script setup lang="ts">
    import BasicContainer from '../../containers/BasicContainer.vue';
    import ContentContainer from '../../containers/ContentContainer.vue';
</script>

<style scoped>
    .basic_container {
        padding-top: var(--header_height); /* Move down from the header! */

        background: linear-gradient(0deg, var(--overlay_color), var(--overlay_color)), url(/images/pages/home/Landing_Hero_Large_16_9.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;

        width: 100%;
        max-height: 100vh;
    }

    @media (max-width: 1280px) {
        .basic_container {
            background: linear-gradient(0deg, var(--overlay_color), var(--overlay_color)), url(/images/pages/home/Landing_Hero_Medium_3_2.jpg);
            min-height: 100vh;
            max-height: 100vh;

            background-size: cover;
            background-repeat: no-repeat;
        }
    }

    @media (max-width: 640px) {
        .basic_container {
            background: linear-gradient(0deg, var(--overlay_color), var(--overlay_color)), url(/images/pages/home/Landing_Hero_Small_2_3.jpg);
            max-height: 80vh;

            background-size: cover;
            background-repeat: no-repeat;
        }
    }
</style>

基本容器组件

<template>
    <div class="basic_container">
        <slot></slot>
    </div>
</template>

<style>
    .basic_container {
        width: 100%; /* Take up as much space as possible! */
    }
</style>

Answer 1

好吧，我无法再次重新创建该错误，而且似乎它已经以某种方式解决了。可能是这样，当在比实际屏幕更大的宽度上使用 chrome 开发工具时，由于宽度不一样，您可能会得到一些伪像。试图看看它在不同屏幕上的样子，在这种情况下是宽屏幕！ :=)