CSS背景模糊+去白边效果

正在做一个导航页，想要背景图模糊处理，找了很多教程，总结的

基础代码

html代码

<div class="sun-main">
    <!-- 背景图片以及模糊层 -->
    <div class="cover" />
    <div class="content">
        <!-- 其他代码 -->
    </div>
</div>
<!-- 固定的style -->
<style>
.content{
    position:absolute;
    height:100%;
    width:100%;
}
.sun-main{
    height:100%;
    width:100%;
}
body,html{
  overflow: hidden;
}
</style>

实现效果

其他css代码

方式1:

.cover{
  width:100%;
  height:100%;
  position:absolute;
  overflow: hidden;
}
.cover::before{
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  background: url(@/assets/start_sky.jpg) no-repeat;
  background-size:cover;
  background-attachment:fixed;
  background-position: center;
  filter:blur(5px); // 模糊代码
  transform: scale(1.05);// 防止白边
  z-index:-1;
}

方式2: 自己尝试总结的有效果

.cover{
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  overflow: hidden;
  background: url(@/assets/start_sky.jpg) no-repeat;
  background-size:cover;
  background-attachment:fixed;
  background-position: center;
  filter:blur(1px); // 模糊代码
  transform: scale(1.05);// 防止白边
}