自己的博客

Posted 2021-01-05 weizhibin1996

1、一定要使用reset.css

 

2、背景图

没有内容的话，就不会有背景

fixed可以固定显示

 

仔细想想，背景图，应该是放在body下的。

然后app组件下，加个半透明的背景色

这样就能很好的实现背景

 

同时，背景太清晰了，必须模糊一点

filter: blur(2px);

 

背景图不能放body下

 

应该放在app组件下

不然刷新页面的时候，会把清晰的背景图显现出来。

 

整体CSS

<template>
  <div id="app">
    <div id="container">
      <keep-alive>
        <router-view/>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: ‘App‘
}
</script>

<style scoped>

  #app{
    background: url("https://blog-1252736437.cos.ap-shanghai.myqcloud.com/background.png") fixed no-repeat;
    background-size: 100%;
    filter: blur(2px);
  }

  #container{
    width: 100%;
    height: 1500px;
    background-color: rgba(255,255,255,0.8);
  }
</style>

 

图片要改成

repeat-y

不然缩放之后，下面就没背景了

x轴不需要

 

 

有个问题

这个属性，会让这个div下所有子元素都模糊。所以完美的做法是通过after伪类去搞

 

需要z-index+position去使得after档住父元素

z-index要设置为负数，不然档住子元素了

#app{
    position: relative;
    z-index: -2;
  }

  #app::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    background: url("https://blog-1252736437.cos.ap-shanghai.myqcloud.com/background.png") fixed repeat-y;
    background-size: 100%;
    filter: blur(2px);
    z-index: -1;
  }

 

after是个很奇妙的东西

https://blog.csdn.net/csu_passer/article/details/78406702

 

 

 

after不行

给app设置了-2，after-1。现在页面默认body是0

那么最上层的就是body了。app container里面的东西是无法交互的！

 

将contaner的层级提到最高，背景全都不见了？？？？为啥

 

 

父元素高度为0，因为孩子都浮动了，坍塌

 

给app显示赋值1500px

 

after有高度

 

 

 

但是所有常规的清楚浮动方法都无效了

 

不对。这个不是浮动了。

是因为absolute脱离的文档流，用清除浮动当然没有效果

 

<div class="container">
    
    <div class="bg">

    </div>    
    <div class="content">
        
    </div>

</div>

<style>

/*父元素宽100%，是根据body渲染的*/
 .container{
     width: 100%;
    
 }

/*bg width100% 根据contanier*/
/*height 100% 但是目前父元素高度是0*/
 .bg{
     width: 100%;
     height: 100%;
 }

/*现在才撑开父元素*/
.content{
    width: 100%;
    height: 1500px;
}

 

如果bg写在后面呢？

 

还是0。

没有办法的

 

所以，父元素的高度无法确定的情况下，没法设置模糊背景！

 

 

可以在父元素渲染玩之后，通过js代码设定bg的高度

 

但是vue里面，这种方法不行。。。算了不要背景了

 

用fixed即可。。。

把背景全都丢进fixed里面。很奇怪的。

因为fixed是一个特殊的potiton，他也脱离文档流，但是他和absolute不一样，他是相对于窗口的，所以他设置height100%的话，高度就是窗口高度

最终效果如下

<template>
  <div id="app">
    <div id="container">
      <home-header></home-header>
      <keep-alive>
        <router-view/>
      </keep-alive>
    </div>
    <div id="bg"></div>
  </div>
</template>

<script>
import HomeHeader from "./components/header/Header";
export default {
  name: ‘App‘,
  components: {HomeHeader}
}
</script>

<style scoped>

  #app{
    width: 100%;
  }

  #container{
    width: 100%;
    height: 1500px;
    background-color: rgba(255,255,255,0.8);
  }

  #bg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("https://blog-1252736437.cos.ap-shanghai.myqcloud.com/background.png") fixed repeat-y;
    background-size: 100%;
    filter: blur(2px);
    z-index: -1;
  }
</style>