Vue-cli를 사용하여 개별 페이지의 배경 그림을 전체 화면으로 배치
<template>
<div id="logo">
</div>
</template>
<script>
import meadiaurl from '../../api/mediaurl'
export default {
name: "logo"
</script>
<style scoped>
#logo{
background: url("../../assets/images/Login.png");
background-size: 100% 100%;
height: 100%;
}
</style>
상기 코드와 같이 높이가 100%일 때 배경 그림은 내용만 받쳐도 전체 화면이 배경 그림을 가득 깔지 못하는 것을 발견할 수 있다.솔루션:
우리는 #logo를 문서 흐름에서 벗어나게 하고fixed 속성을 추가해야 한다
#logo{
background: url("../../assets/images/Login.png");
background-size: 100% 100%;
height: 100%;
position: fixed;
width: 100%
}
보충 지식: vue 전체 화면 표시 및 전체 화면 단추svg 그림 구현1, 첫 번째 설치 screenfull
npm install --save screenfull
2, 새 screenfull.vue 구성 요소,
<template>
<div>
<svg
t="1508738709248"
class="screenfull-svg"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2069"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32"
height="32"
@click="click">
<path
d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
p-id="2070"/>
<path
d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
p-id="2071"/>
<path
d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
p-id="2072"/>
<path
d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
p-id="2073"/>
</svg>
</div>
</template>
<script>
import screenfull from 'screenfull' // screenfull
export default {
name: 'Screenfull',
props: {
width: {
type: Number,
default: 22
},
height: {
type: Number,
default: 22
},
fill: {
type: String,
default: '#48576a'
}
},
data(){
return {
isFullscreen: false //
}
},
methods: {
click(){
if(!screenfull.enabled){
this.$message({
message: ' ',
type: 'warning'
})
return false
}
screenfull.toggle()
}
}
}
</script>
<style scoped>
.screenfull-svg {
width: 20px;
height: 20px;
cursor: pointer;
fill: red;
}
</style>
3, 필요한 구성 요소에 이 구성 요소를 도입하면이상의 이 편은 Vue-cli에서 단독 페이지를 위한 배경 그림을 전체 화면에 깔아 놓는 것이 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희도 많이 사랑해 주세요.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue-cli 이동단 레이아웃 및 애니메이션 사용 상세 정보vue-cli(중점) vue-cli는 vue 프로젝트를 관리하는 도구로 vue-cli를 사용하여 프로젝트를 신속하게 만들고, 프로젝트를 시작하고, 프로젝트를 컴파일하는 등 작업을 할 수 있습니다. vue의 단일 파일...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.