Mengapa kesan kecerunan saya tidak pudar di tepi imej?

Question

Saya mahu bahagian tepi imej menjadi kabur, atau sekurang-kurangnya pudar samar-samar. Tiada apa yang saya cuba berjaya dan saya melihat semua soalan pada Stackoverflow. Saya menggunakan CSS, bukan Sass. Untuk merumitkan masalah, saya mempunyai imej latar belakang pada halaman dan menutupnya dengan topeng putih dengan kelegapan 0.8. Ada sesiapa boleh tolong?

Ini adalah codepen saya.

.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

Saya akhirnya terpaksa menukar sedikit konsep saya. Saya mengalih keluar imej latar belakang dan topeng dari seluruh halaman dan hanya menetapkan latar belakang halaman kepada putih tanpa topeng. Kemudian saya menggunakan penyelesaian untuk mengaburkan tepi menggunakan CSS untuk imej atau imej latar belakang

Jadi kod saya kelihatan seperti ini:

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;
}