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

╰半橙微兮° 2023-07-03 02:56 27阅读 0赞

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

网上的答案:

在主div上设置:
    <div :style="backgroundDiv">
    </div>
    
    data中的设置:
    data() {
        return {
          backgroundDiv : {
            backgroundImage : 'url(' + require('../assets/image/BJ1.jpg') + ')',
            backgroundRepeat : 'no-repeat',
            backgroundSize : '100% 100%',
          },  
        }

**代码没有问题,但是效果并不是想象中的效果,页面如下:**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70]  
**当我以为我代码出毛病的时候我尝试在我的div区域中写了一行字,效果出来了:**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 1]  
**这图片只存在于div区间内(我才知道大家理解的 背景!!! 图片是这个意思.)我理解的一直是桌面背景这个意思,不知道有没有人和我一个理解.**

**在这里我谈谈我的个人理解,因为是Web单页应用,背景应该是加到**  
![在这里插入图片描述][20200201045613477.png]  
**index.html这个文件中,如果要在不同的Vue中设置不同的背景,那么就可以使用如下代码:**

最外边的div
    <div id="building">
    </div>
      
    <style> #building{ background:url("../assets/image/BJ1.jpg"); width:100%; //大小设置为100% height:100%; //大小设置为100% position:fixed; background-size:100% 100%;} </style>

**如上100%的大小设置的是页面的大小,图片无论多大都会去适应页面的大小,效果如下:**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 2]  
**这是在不知道搜啥的时候用全屏背景四个字搜到的一位大佬的写法**  
[点击查看原版][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200201044721294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200201045117179.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s=,size_16,color_FFFFFF,t_70
[20200201045613477.png]: https://img-blog.csdnimg.cn/20200201045613477.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/202002010506494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s=,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/weixin_40679578/article/details/99205774