html - 如何摆脱再次出现在底部的背景图像？

Question

我不知道如何摆脱背景图像再次出现，猜测它与&:before有关，我希望你能帮助我。 提前致谢。

http://codepen.io/ctrprt253/pen/qZVKKG

.bg-image{
  background: $color-primary;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
  //text-shadow: 2px 0 5px black;

  &:before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #333     url('https://1.bp.blogspot.com/-6E1qWDwgvPE/UW1IxACizzI/AAAAAAAAAOc/5COs8aubq4c/s1600/the_art_of_conversation_by_rttmsdag-d32q8oc.jpg') no-repeat top center;
    background-size: cover;
    background-attachment: fixed;
    filter: blur(5px);
    opacity: .8;
    transform: scale(0.8);
  }

Answer 1

改变这一行:

background: #333     url('https://1.bp.blogspot.com/-6E1qWDwgvPE/UW1IxACizzI/AAAAAAAAAOc/5COs8aubq4c/s1600/the_art_of_conversation_by_rttmsdag-d32q8oc.jpg') no-repeat top center;

据此:

background: #333;

你可以删除这些行:

background-size: cover;
background-attachment: fixed;

See it here