為什麼我的漸層效果在影像邊緣無法達到淡出效果？

Question

我想讓影像的邊緣變得模糊，或至少模糊地淡出。我嘗試過的任何方法都不起作用，並且我查看了 Stackoverflow 上的所有問題。我使用的是 CSS，而不是 Sass。使問題變得複雜的是，我在頁面上有一個背景圖像，並用不透明度為 0.8 的白色蒙版覆蓋它。請問有人可以幫忙嗎？

這是我的 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;
}