vue设置背景占满全屏

最新推荐文章于 2024-07-09 20:43:28 发布
最新推荐文章于 2024-07-09 20:43:28 发布
阅读量1.2w 收藏 39
点赞数 25
分类专栏： vue 文章标签： css vue html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33581509/article/details/118255227
版权
本文介绍了如何在Vue项目中设置背景图片充满整个屏幕。通过创建全局样式表`global.css`，并在`main.js`中引入，结合CSS样式实现背景全屏效果。
摘要由CSDN通过智能技术生成

vue设置背景占满全屏

示例：如下图的顶部和左侧的画红线的区域：
在这里插入图片描述

解决背景图片占满全屏的问题如下：
1、首选要新建一个全局样式表global.css文件，代码如下：

/* 全局样式表 */
html,
body,
#app {
   
    height: 100%;
    margin: 0;
    padding: 0;
}

2、在项目入口文件main.js中导入全局样式表，代码如下：


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  w1990end
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    25
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    39
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  10
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue如何让一个div占满全屏_使用Vue-cli 中为单独页面设置背景图片铺满全屏

				
			

			

				

					weixin_39760434的博客
				

				

					12-19
					
					6480
					
				

			

		

		

			
				
啥也不说了，大家还是直接看代码吧~import meadiaurl from '../../api/mediaurl'export default {name: "logo"#logo{background: url("../../assets/images/Login.png");background-size: 100% 100%;height: 100%;}如果像以上代码写，高度为100%时...

			
		

	



                

              
                



	

		

			

				
					
Vue项目中设置背景图片方法

				
			

			

				

					08-28
				

			

		

		

			
				
下面小编就为大家分享一篇Vue项目中设置背景图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	



                


  
              

                


	

		

			

				
					
在Vue中将单独一张图片设为背景图并充满整个屏幕

				
			

			

				

					qq_43894292的博客
				

				

					04-21
					
					716
					
				

			

		

		

			
				
vue图片

			
		

	





	

		

			

				
					
vue中如何配置App.vue实现子组件占满整个屏幕

					
最新发布

				
			

			

				

					weixin_59244784的博客
				

				

					07-09
					
					156
					
				

			

		

		

			
				
vue中如何配置App.vue实现子组件占满整个屏幕

			
		

	



		

			
		



	

		

			

				
					
使用Vue-cli 中为单独页面设置背景图片铺满全屏

				
			

			

				

					01-19
				

			

		

		

			
				
啥也不说了，大家还是直接看代码吧~

<template>
  <div id=logo>
  </div>
</template>
[removed]
 import meadiaurl from '../../api/mediaurl'
  export default {
    name: logo
[removed]
<style scoped>
 #logo{
  background: url(../../assets/images/Login.png);
  background-size: 1000%;
  height: 100%;
 }
</style>

			
		

	





	

		

			

				
					
在Vue中实现全屏背景图片

				
			

			

				

					lplovewjm的博客
				

				

					05-28
					
					6078
					
				

			

		

		

			
				
可以使用absolute或relative，然后height设置成auto自动

			
		

	





	

		

			

				
					
vue 背景图片铺满整个屏幕（适配所有机型）

				
			

			

				

					leng0920的博客
				

				

					08-09
					
					2万+
					
				

			

		

		

			
				
背景图片铺满整个屏幕（适配所有机型）

			
		

	





	

		

			

				
					
Vue-cli中设置背景图片铺满整个屏幕

				
			

			

				

					ywp2021的博客
				

				

					10-24
					
					2825
					
				

			

		

		

			
				
有效解决Vue背景图片问题

			
		

	





	

		

			

				
					
vue实现浏览器全屏展示功能

				
			

			

				

					10-15
				

			

		

		

			
				
在Vue.js项目中，实现浏览器全屏展示功能是一项常见的需求，特别是在创建沉浸式用户体验或进行全屏演示时。在本示例中，开发者使用了`sreenfull`这个第三方插件来简化这一过程。以下是关于如何使用`sreenfull`插件在...

			
		

	





	

		

			

				
					
vue移动端设置全屏背景

				
			

			

				

					风海洋的博客
				

				

					05-30
					
					1352
					
				

			

		

		

			
				
vue移动端项目设置全屏背景，关键是要找对文件，然后添加background属性即可，这里说的全屏背景，是指任意切换页面，背景都还是这个背景，那么只要在入口html文件或者全局vue文件中增加background属性就能达到目的。

			
		

	





	

		

			

				
					
vue实现背景自动全屏

				
			

			

				

					qq_44130891的博客
				

				

					11-09
					
					508
					
				

			

		

		

			
				
vue实现背景自动全屏

			
		

	





	

		

			

				
					
vue3项目中如何一个vue组件中的一个div里面的图片铺满整个屏幕样式如何设置

				
			

			

				

					舒一笑的博客
				

				

					03-01
					
					1641
					
				

			

		

		

			
				
在Vue 3项目中，要使一个divdiv元素和图片元素的样式设置正确，以及确保它们能够覆盖整个视口（viewport）。以下是一个简单的步骤和代码示例，帮助你实现这一目标。

			
		

	





	

		

			

				
					
vue绘制可视化大屏将图片作为背景铺满全屏

				
			

			

				

					qq_45349764的博客
				

				

					05-31
					
					2363
					
				

			

		

		

			
				
我们通过CSS中的background-image属性将图像作为其背景，并将其调整为cover大小，以便它覆盖整个元素而不会失真。background-repeat被设置为no-repeat，以确保图像不会重复，而background-position将图像定位在元素正中间。在Vue.js中，可以通过CSS中的background-image属性来设置背景图片并将其铺满整个屏幕。您可以将上述示例修改以适应您的需求，例如更改背景图像的URL，或调整CSS属性以实现所需的效果。

			
		

	





	

		

			

				
					
vue组件中设置背景图片，随着页面高度的增加，背景图片能够不断延伸铺满屏幕

				
			

			

				

					scarlett1017的博客
				

				

					03-17
					
					9360
					
				

			

		

		

			
				
在做项目的时候，想要实现背景图片将整个页面铺满，等内容变多，高度超过屏幕高度的时候，背景图片仍然能够完全铺满。
第一种方式：（不是想要的）
第一种情况就是最外层设置一个div盒子，宽度100%，高度100vh。高度100vh，也就是占整个屏幕高度的100%。然后将图片设置成背景图片。背景图片设置100%的高度和宽度。
但是这种方式，它的高度就永远都是屏幕的高度，当屏幕右边出现滚条的时候，拉动，下面那一部分就是没有背景图片的

第二种方式：（不是想要的）
就是给高度设置auto。auto就是通过盒子里面的东西

			
		

	





	

		

			

				
					
在vue中设置背景图片

					
热门推荐

				
			

			

				

					Bakertt的博客
				

				

					03-30
					
					5万+
					
				

			

		

		

			
				
在vue中设置背景图片

在App.vue中将样式中默认的margin-top 改为0，使得页面顶部不留白

`#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}`

			
		

	





	

		

			

				
					
VUE解决背景图片没有铺满的问题

				
			

			

				

					测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
				

				

					04-05
					
					6426
					
				

			

		

		

			
				
我刚下载的VUE-cli框架，但是设置背景图片的时候发现，在App.vue文件中设置style的风格css即可，红色部分其实就是网上抄来的，这就是背景图片的设置



但是我又发现了，图片没有铺满。



类似图片中的这样，上面和左边都会留个缝隙。

我找了半天都没有找到，直到看到：解决vue背景无法铺满全屏的问题 - 简书

这个说的情况跟我一样，只不过它是在index.html，我的工程里都没有，但是一葫芦画瓢，我在App.vue文件添加上body即可：



发现一家解决了背景图片铺满的问题了。
..

			
		

	





	

		

			

				
					
vue项目-设置全屏背景

				
			

			

				

					qq_49172635的博客
				

				

					04-20
					
					499
					
				

			

		

		

			
				
全屏背景

			
		

	





	

		

			

				
					
vue设置全屏背景图片

				
			

			

				

					05-03
				

			

		

		

			
				
你可以在Vue组件中使用CSS样式来设置全屏背景图片。这里有一个示例代码：

```html
<template>
  <div class="full-screen-background">
    <!-- 页面内容 -->
  </div>
</template>

<style>
.full-screen-background {
  background-image: url('/path/to/image.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
</style>
```

在这个示例中，我们使用了CSS属性 `background-image` 来设置背景图片路径， `background-repeat` 来设置背景图片是否重复， `background-position` 来设置背景图片的位置， `background-size` 来设置背景图片的大小。`width` 和 `height` 属性设置为 `100%` 和 `100vh` 来让组件占据整个屏幕。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 10

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值