如何实现网站背景为视频的模糊？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现网站背景为视频的模糊？相关的知识，希望对你有一定的参考价值。
我一直在阅读其他Stack Overflow的帖子，关于这个主题，但我似乎无法使它发挥作用。
我想知道如何设置模糊视频循环播放作为背景。在这个Squarespace网站上看到了我想做的事情。https: /geoxor.me.
还没有找到任何模糊效果的代码，因为我还在尝试让视频部分工作。
我现在使用的代码是
<video id="videoBackground" autoplay muted loop>
<source src="https://player.vimeo.com/video/144855113">
</video>
css
#videoBackground {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
我希望得到任何建议，感谢您的时间!
答案
你可以将视频元素包裹在一个容器中，使视频居中，并设置宽度和高度来填充屏幕。然后为视频添加滤镜：blur()来模糊背景。请记住，这使得边缘模糊的白色，所以你必须用transform:scale把它放大，以隐藏边缘。
#videoBackground {
width: inherit;
height: inherit;
-webkit-filter: blur(15px);
-o-filter: blur(5px);
filter: blur(5px);
object-fit: cover;
transform: scale(1.06); /* Hide edge blur */
}
#container {
width: 100vw;
height: 100vh;
text-align: center;
overflow: hidden;
}<div id="container">
<video id="videoBackground" autoplay muted loop>
<source src="https://vod-progressive.akamaized.net/exp=1591758868~acl=%2A%2F1646772055.mp4%2A~hmac=ca002f29c4796df2b022404219ed50625d2baf4043cb622ce78dcb05f8c9edbb/vimeo-prod-skyfire-std-us/01/2944/15/389724705/1646772055.mp4">
</video>
</div>另一答案
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
filter: blur(5px);
}
html, body {
height: 100%;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 150%;
line-height: 1.4;
}
body {
margin: 0;
}
.viewport-header {
position: relative;
height: 50vh;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-family: 'Syncopate', sans-serif;
color: #4a3a27;
text-transform: uppercase;
letter-spacing: 3vw;
line-height: 1.2;
font-size: 3vw;
text-align: center;
span {
display: block;
font-size: 10vw;
letter-spacing: -1.3vw;
}
}
main {
width: 80vw;
left: 10%;
overflow: auto;
background: rgba(black, 0.66);
color: white;
position: relative;
padding: 1rem;
padding: 20px;
border: 1px solid #000;
text-align:center;
color: #4a3a27;
font-weight: bold;
}<video src="https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/blurry-trees.mov" autoplay loop playsinline muted></video>
<header class="viewport-header">
<h1>
Explore
<span>Montana</span>
</h1>
</header>
<main>
I love Coding
</main>以上是关于如何实现网站背景为视频的模糊？的主要内容，如果未能解决你的问题，请参考以下文章
ElasticSearch05_模糊匹配背景fuzzy核心参数说明编写JAVA代码实现纠错