时间戳

首页 > 解决方案 > 背景图像没有显示css

css - 背景图像没有显示css

问题描述

我正在尝试在我的 Vue 项目中使用响应式全屏图像背景，但无法显示图像，并且不确定出了什么问题，我看到的大多数示例在我的代码示例中都使用了 css

<template>
    <div id="myDiv">

    </div>
</template>

<script>
</script>

<style scoped>
    #myDiv {
        /*background: url('../../Images/Toronto.jpg');*/
        background: url('https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

标签： cssvue.js

解决方案

HTML 和 body 标签需要有min-height: 100%.

如果你不能这样做，其他选择是申请min-height: 100vh和min-width: 100vw.

推荐阅读