Question

因此，我正在解决这个问题，即图片在边缘消失。它们在边缘上褪色的原因是滤镜模糊。 （我需要模糊滤镜） 任何建议我如何摆脱淡入淡出或是在CSS中做模糊效果的另一种方式，还是我必须在photoshop中做到这一点？

＆＃13;

.bg-img{
	background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed;
	background-size: cover;
	display: block;
	filter: blur(5px);
	-webkit-filter: blur(5px);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 0;
	margin: 0
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="framside.css">
	</head>
	<body>
		<div class="bg-img"></div>
	</body>
</html>

＆＃13;

Answer 1

您还可以使用负％偏移顶部，右侧，底部，左侧。然后将偏移量作为％添加到宽度和高度。当然，这是假设您不太关心稍微裁剪图像。

e.g。 https://jsfiddle.net/mwzddfs6/

ul

ps：我也更喜欢使用内容：之前，为了保持代码清洁。个人偏好，就是全部。

Answer 2

您可以在模糊版本后面堆叠非模糊版本：

＆＃13;

.bg-img-solid{
	background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed;
	background-size: cover;
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 0;
	margin: 0
}

.bg-img{
	background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed;
	background-size: cover;
	display: block;
	filter: blur(5px);
	-webkit-filter: blur(5px);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 0;
	margin: 0
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="framside.css">
	</head>
	<body>
		<div class="bg-img-solid"><div class="bg-img"></div></div>
	</body>
</html>

＆＃13;

我只是复制然后从父div中删除了模糊。

CSS - 删除背景褪色边缘

2 个答案: