天天看点

html 背景边缘模糊,css加背景模糊之后如何让边缘不模糊?

.video_bg{

content: "";

width:38.1vw;

.height(50);

position:absolute;

top:0;

left:0;

//background:url(https://assets.dspunion.com/cdn-adn/v2/offersync/19/02/21/11/17/5c6e1851cf6fb.jpg) no-repeat 100% 100%;

background:url(https://assets.dspunion.com/cdn-adn/v2/offersync/19/02/21/11/17/5c6e18661de66.jpg) no-repeat center center;

background-size:cover;

-webkit-filter: blur(5px);

-moz-filter: blur(5px);

-o-filter: blur(5px);

-ms-filter: blur(5px);

filter: blur(5px);

z-index: 1;

}

设计背景图片,产品设计图是模糊的背景图片,我使用filter之后,设计反应边缘不可以模糊,有没有好的办法可以解决这个问题?我试过了:after加模糊效果是一样的,都会边缘模糊。

html 背景边缘模糊,css加背景模糊之后如何让边缘不模糊?

这是我的效果。设计效果图是下面这样:

html 背景边缘模糊,css加背景模糊之后如何让边缘不模糊?