Warum wird mein Verlaufseffekt an den Bildrändern nicht ausgeblendet?

Question

Ich möchte, dass die Ränder des Bildes verschwommen sind oder zumindest leicht ausgeblendet werden. Nichts, was ich versucht habe, hat funktioniert und ich habe mir alle Fragen auf Stackoverflow angesehen. Ich verwende CSS, nicht Sass. Um das Problem zu verkomplizieren, habe ich ein Hintergrundbild auf der Seite und decke es mit einer weißen Maske mit einer Deckkraft von 0,8 ab. Kann mir bitte jemand helfen?

Das ist mein Codepen.

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: inline-block;
  overflow: hidden;
  margin-top: -6px;
}

.bg {
  background-image: url('//newsinteractive.post-gazette.com/.testLaura2/shutterstock_246230623.jpg');
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  filter: blur(3px);
}

.bg-mask {
  width: 100%;
  background-color: rgba(255, 255, 255, .8);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
}

#ballerina {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1600px;
  height: 1000px;
  background-image: url('http://newsinteractive.post-gazette.com/.testLaura2/BalletAudition04xx_2992.jpg');
}

#ballerina:after {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 1600px;
  height: 1000px;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000', GradientType=0);
  /* IE6-9 */
}

<div class="bg"></div>
<div class="bg-mask"></div>

<div class="screen height-auto">
  <div id="ballerina"></div>
</div>

Answer 1

我最终不得不稍微改变一下我的概念。我删除了整个页面的背景图像和蒙版，只是将页面背景设置为白色，没有蒙版。然后我使用了 模糊边缘的解决方案使用 CSS 的图像或背景图像

所以我的代码如下所示：

html：

<div class="img-contain">
    <img src="http://newsinteractive.post-gazette.com/.testLaura2/BalletAudition04xx_2992.jpg">
    <div class="block"></div>
</div>

CSS：

.img-contain {
    margin: auto;
    width: 100%;
    margin: auto;
    position: relative;
}

.img-contain img {
    width: 100%;
    height: auto;
}

.block {
    width: 100%;
    position: absolute;
    bottom: 0px;
    top: 0px;
    box-shadow: inset -0px -0px 20px 20px white;
}