html - 背景中模糊视频上的白色边框
问题描述
我想在背景中有一个稍微模糊的视频,但由于某种原因,屏幕边缘有白色边框。屏幕右下角的屏幕截图。怎么可能去掉那些白边?
如果视频不模糊,则视频没有白色边框。我尝试将宽度和高度设置为 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"/>
推荐阅读
- javascript - 反应原生的甲日期
- dataframe - 火花数据框在加入后没有正确划分
- visual-studio-2012 - 在 VS 对话框资源编辑器中编辑控件的大小和位置
- apache-spark - salesforce spark read 是不是很懒
- c# - Xamarin:是否可以在 App.cs 文件中包含我的字体资源?
- cplex - 在 Cplex 中使用给定的概率分布对提前期建模
- imap - 是否可以使用 Apple 登录通过 IMAP 访问 Apple 邮件?
- javascript - 从电子邮件中获取用户身份验证(未登录)
- excel - VBA 代码中的单个单元格无法正确粘贴
- javascript - Node.js:读取长 JSON 文件总是会剪切最后一个右括号字符