I want the edges of the image to be blurry, or at least fade out blurry. Nothing I tried worked and I looked at all the questions on Stackoverflow. I'm using CSS, not Sass. To complicate the problem, I have a background image on the page and cover it with a white mask with an opacity of 0.8. Can anyone please help?
This is my 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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I ended up having to change my concept a little bit. I removed the background image and mask from the entire page and just set the page background to white with no mask. Then I used a solution for blurring edges using CSS for images or background images
So my code looks like this:
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; }