背景中模糊视频上的白色边框



我想在背景中有一个稍微模糊的视频,但由于某种原因,屏幕边缘有白色边框。屏幕右下角的屏幕截图。如何删除这些白色边框?

如果视频没有模糊,则视频没有白色边框。我尝试将 widht 和高度设置为 110%,但这没有帮助。

:root {
--main-bg-color: coral;
--menu: #D00000;
--menu-hover: #FFBA08;
}
* {
box-sizing: border-box;
}
body {
font-family: Quicksand, sans-serif;
}
#background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
filter: blur(10px);
outline: none;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script>
</script>
</head>
<body>
<video autoplay muted loop id="background">
<source src="background.mp4" type="video/mp4">
</video>
</body>
</html>

希望这符合您的用例!如果您使用backdrop-filter而不是filter,则不会发生这种情况 - 尝试在视频上叠加backdrop-filter:)

下面是一个示例:https://codepen.io/annaazzam/pen/RwrMGVG

#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(8px);
}
<video>...</video>
<div id="overlay"/>

最新更新