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 */ }