Vue-cli中设置背景图片铺满整个屏幕
有效解决Vue背景图片问题
·
三种CSS设置方法,任选其一
<template>
<div class="wrapper">
</div>
</template>
<style>
.wrapper {
/*1.背景全屏固定,使用fixed定位,内容完全显示且可滚动查看*/
/*
position: fixed;
height: 100%;
width: 100%;
background: url("../assets/dd.png") no-repeat;
background-size:100% 100%;
overflow-y: scroll;
overflow-x: hidden;
*/
/*2.线性渐变色背景全屏缩放大小,不用定位,内容完全显示且可滚动查看*/
/*
background: linear-gradient(to bottom right, blue, red) center center no-repeat;
background-size: 100% 100%;
overflow: hidden;
min-height: 100vh;
*/
/* 3.背景全屏缩放大小,内容完全显示且可滚动查看,绝对定位*/
width: 100%;
min-height: 100vh;
background: url("../assets/bg.jpg") center center no-repeat;
background-size: 100% 100%;
position:absolute;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)