我想让我的图像的边缘模糊,或者至少,淡出模糊。我已经尝试过没有工作,我已经看了所有的Stackoverflow的问题。我使用CSS,而不是Sass。复杂的问题是,我有一个背景图像在页面上,我用一个白色的面具覆盖与.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>
1条答案
按热度按时间o8x7eapl1#
最后我不得不稍微改变一下我的概念。我去掉了整个页面的背景图像和蒙版,只是让页面背景变成白色,没有蒙版。然后我使用了Blur the edges of an image or background image with CSS的解决方案
我的代码看起来像这样:
联系我们
css: