Question

我正在尝试制作这样的页面

标题应该是固定的，bg-image也应该修复，我这样做了。我唯一的问题是，如何制作完全相同的模糊。我做错了什么？

这是我的代码

<body>
    <div class="main">
      <div class="bg-image">
        <div class="header"></div>
      </div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cumque, esse eum facere illum iste maxime neque omnis saepe temporibus totam veritatis! Asperiores, dignissimos illum in labore libero nihil saepe!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cumque, esse eum facere illum iste maxime neque omnis saepe temporibus totam veritatis! Asperiores, dignissimos illum in labore libero nihil saepe!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cumque, esse eum facere illum iste maxime neque omnis saepe temporibus totam veritatis! Asperiores, dignissimos illum in labore libero nihil saepe!</p>
      </div>
    </div>
  </body>

这是SASS

@mixin background($imgpath,$position:0 0,$repeat: no-repeat)
  background:
    image: url($imgpath)
    position: $position
    repeat: $repeat

html, body
  height: 100%
  width: 100%
  padding: 0
  margin: 0

.bg-image
  @include background('http://imgur.com/sTO5GYX')
  background-size: cover
  background-attachment: fixed
  display: block
  height: 500px
  width: 100%
  z-index: 1
  .header
    @include background('http://imgur.com/sTO5GYX')
    position: fixed
    top: 0
    left: 0
    z-index: 2
    background: rgba(153, 184, 208, 0.3)
    height: 50px
    display: block
    width: 100%
    filter: blur(2px)
.content
  height: 1500px
  display: block
  width: 100%
  text-align: center

Answer 1

层：
1 - 常规背景图片;
1.5 - 纯色图层，以避免面对白色背景时出现模糊边框;
2 - 用模糊（降低的高度）克隆它;
3 - 不透明度低的白色层（高度降低）;

在第2层上使用亮度滤镜是可选的（根据图片）：

  -webkit-filter: blur(5px) brightness(120%); /* Chrome, Safari, Opera */
  filter: blur(5px) brightness(120%);

jsfiddle 1 - regular bg;

jsfiddle 2 - white bg;

body {
  width: 100vw;
  height: 100vh;
  background-color: rgb(255,204,255);
  margin: 0%;  
}
	
.bg1 {
  width: 100%;
  height: 100%;
  background-image: url('http://i.imgur.com/tWZjcIp.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.bg1_5 {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;  
  background: rgba(174,116,187,0.5);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg2 {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;  
  background-image: url('http://i.imgur.com/tWZjcIp.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
  filter: blur(5px);
}

.bg3 {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;  
  background: rgba(255,204,255,0.1);
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="bg1"></div>

<div class="bg1_5"></div>

<div class="bg2"></div>

<div class="bg3"></div>

固定标题有模糊效果，我做错了什么？

1 个答案: