作者:河南王修华 | 来源:互联网 | 2023-05-19 13:04
如何从背景图像中删除白色模糊边框.
CSS,我尝试添加保证金:-10px,但它不起作用
.background-image {
background: no-repeat center center fixed;
background-image: url('https://img.php1.cn/3cd4a/1eebe/cd5/d84f9786330d9e41.png') ;
background-size: cover;
display: block;
height: 100%;
left: -5px;
top:-5px;
bottom:-5px;
position: fixed;
right: -5px;
z-index: 1;
margin:0px auto;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
http://jsfiddle.net/maio/8wq132nd/1/
1> 小智..:
最简单的方法是添加transform:scale(1.1).在这里试试吧.
#overlay {
position: fixed;
left: 22.5em;
top: 3em;
height: 75%;
width: 50%;
background: url("https://s-media-cacheak0.pinimg.com/originals/ae/b4/c5/aeb4c53cab2b550187644af503a0f17e.png");
background-size: cover;
filter: blur(9px);
transform: scale(1.1);
}
认为这会使图像缩放更大,如果您希望图像保持相同大小并且只想去除白色边框,则不是很完美
2> Prime..:
我已经添加了溢出,填充甚至边距,但仍然没有解决问题.所以我试图在div之间给出图像标签.问题解决了.
CSS
.background-image {
background: no-repeat center center fixed;
background-size: cover;
display: block;
left: -5px;
top:-5px;
bottom:-5px;
position: fixed;
right: -5px;
z-index: 1;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin:-5px;
}
小提琴
http://jsfiddle.net/2pgdttLh/