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项目中设置背景图片方法

				
			

			

				

					08-28
				

			

		

		

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

			
		

	



                

              
                



	

		

			

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

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	



                


  
              

                


	

		

			

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

					
最新发布

				
			

			

				

					weixin_59244784的博客
				

				

					07-09
					
					147
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					leng0920的博客
				

				

					08-09
					
					2万+
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

				
					
在Vue中实现全屏背景图片

				
			

			

				

					lplovewjm的博客
				

				

					05-28
					
					6037
					
				

			

		

		

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

			
		

	





	

		

			

				
					
vue项目-设置全屏背景

				
			

			

				

					qq_49172635的博客
				

				

					04-20
					
					489
					
				

			

		

		

			
				
全屏背景

			
		

	





	

		

			

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

				
			

			

				

					scarlett1017的博客
				

				

					03-17
					
					9344
					
				

			

		

		

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

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

			
		

	





	

		

			

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

				
			

			

				

					10-15
				

			

		

		

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

			
		

	





	

		

			

				
					
背景图片铺满全屏

				
			

			

				

					02-16
				

			

		

		

			
				
html背景图片铺满全屏

			
		

	





	

		

			

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

				
			

			

				

					ywp2021的博客
				

				

					10-24
					
					2822
					
				

			

		

		

			
				
有效解决Vue背景图片问题

			
		

	





	

		

			

				
					
vue实现背景自动全屏

				
			

			

				

					qq_44130891的博客
				

				

					11-09
					
					504
					
				

			

		

		

			
				
vue实现背景自动全屏

			
		

	





	

		

			

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

				
			

			

				

					qq_45349764的博客
				

				

					05-31
					
					2340
					
				

			

		

		

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

			
		

	





	

		

			

				
					
vue中设置全屏背景

				
			

			

				

					ZPeng_Yan的博客
				

				

					05-22
					
					1万+
					
				

			

		

		

			
				
在Vue项目开发中，有时候我们要向页面中添加一些背景图片，可是当我们在样式中添加了背景图片，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，列如下面的CSS样式就会出现报错：
background:url("../../assets/image/laosiji.jpg");

在node中有一种解决这个问题的方式，如下：
（1）在template中我们先这样写上：
<div :style="bgImg">

（2）我们需要在data中定义：
<template

			
		

	





	

		

			

				
					
vue移动端设置全屏背景

				
			

			

				

					风海洋的博客
				

				

					05-30
					
					1324
					
				

			

		

		

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

			
		

	





	

		

			

				
					
vue 内容块全屏 单页面_使用Vue-cli 中为单独网页设置背景图片铺满全屏

				
			

			

				

					weixin_42524750的博客
				

				

					12-31
					
					465
					
				

			

		

		

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

			
		

	





	

		

			

				
					
Vue设置背景图片

				
			

			

				

					m0_62458145的博客
				

				

					02-05
					
					4460
					
				

			

		

		

			
				
这个style的内容写在data中。一定是要加require包裹路径。只需要在外层div中加入。第二种:在style里。

			
		

	





	

		

			

				
					
Vue-cli 中为单独页面设置背景图片铺满全屏的方法

				
			

			

				

					weixin_41997724的博客
				

				

					01-10
					
					2万+
					
				

			

		

		

			
				
Vue-cli 中为单独页面添加张背景图片从而达到铺满全屏的方法
&lt;template&gt;
    &lt;div id="logo"&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
  import meadiaurl from '../../api/mediaurl'
    export default {
        ...

			
		

	





	

		

			

				
					
Vue设置背景图片(全屏背景),实际操作与踩雷.

					
热门推荐

				
			

			

				

					Ryan_black的博客
				

				

					02-01
					
					5万+
					
				

			

		

		

			
				
最近一直困扰我一个背景问题,也是Vue的项目,问题就是在Vue上添加一个好看的背景,每次去网上查的时候,几乎所有插过来的答案都是一样的,我一度怀疑他们理解的背景和我理解的背景是两个东西
网上的答案:
在主div上设置:
<div :style="backgroundDiv">
</div>

data中的设置:
data() {
    return {
      bac...

			
		

	





	

		

			

				
					
vue css背景图片铺满

				
			

			

				

					08-31
				

			

		

		

			
				
在Vue中，要实现背景图片铺满整个页面的效果，可以通过在App.vue文件中设置style的方式来实现。你可以在style标签中添加如下的CSS代码来达到目的:

```css
<style>
    body {
        margin: 0;
        padding: 0;
        background-image: url('your_image_url');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>
```

在这段代码中，我们给body元素设置了0的外边距和内边距，然后将背景图片的URL设置为你想要的图片路径。通过`background-size: cover;`，背景图片会被缩放到适应整个页面，而且保持其宽高比例。`background-position: center;`将背景图片在页面上居中显示，`background-repeat: no-repeat;`则表示不重复平铺背景图片。

这样设置之后，背景图片就会铺满整个页面了。如果你希望当内容增多，高度超过屏幕高度时背景图片仍然能够完全铺满，可以使用第一种方式进行设置。但需要注意的是，在Vue中，你需要将这段CSS代码添加到App.vue文件的style标签中。

希望这个解答对你有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
-  *1* [VUE解决背景图片没有铺满的问题](https://blog.csdn.net/bbs11007/article/details/123980171)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
-  *2* [vue组件中设置背景图片，随着页面高度的增加，背景图片能够不断延伸铺满屏幕](https://blog.csdn.net/scarlett1017/article/details/123541811)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
-  *3* [CSS实现网页背景图片自适应全屏的方法](https://download.csdn.net/download/weixin_38689055/13607972)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 10

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值