話不多說直接上圖我們只給了寬和高100%就會出現這種狀況
<template>
<div class="hello"></div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {};
}
};
</script>
<style scoped>
.hello {
background: url("../../../static/imagic/sy.jpg") no-repeat;
height: 100%;
width: 100%;
background-size: cover;//全屏展示
}
</style>
background: url("../../../static/imagic/sy.jpg") ——圖片路徑的位置;
no-repeat—— 圖片不重複;
center 0px——center是距離頁面左邊的定位,0px是距離頁面上面的定位;
background-position: center 0——就是圖片的定位,同上;
background-size: cover;——把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中;
min-height: 100vh;——視窗的高度,“視區”所指爲瀏覽器內部的可視區域大小,即window.innerWidth/ window.innerHeight大小。