标签: blur

对于 VueJS 项目，我有一个带有 HTML5<video>标签的视频播放器。在此视频中，我想在左下角显示一些模糊点。

我使用的是画布、纯 CSS 方法，但这些都不起作用。

在CSS中：我在视频前面的div上使用了过滤器：blur(20px)，但它不起作用，模糊影响div的边框而不是中心。

css 中进行模糊测试的图像

对于画布，我们尝试了同样的方法，但我从未在其上得到任何单一的模糊效果

我只需要对图像的红色部分进行模糊效果：

红色部分需要模糊处理

<template>
<div>  
  <div class="contenant">
    <input  type='range' v-model="width" min="0" max="1281" value="0" >
    <img id='image' class="img" src="image1.jpg" alt="test">
    <div id='filtre' v-bind:style="{ width: width + 'px'}"></div>
  </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    width: 0,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.contenant {
  width: fit-content;
}

#filtre {
  height: 96%;
  background-color: red;
  position: …

我想慢慢地从 0% 模糊过渡到 100% 模糊。

理想情况下，我可以使用线性渐变语法backdrop-filter: linear-gradient(blur(8px), blur(8px), blur(0));，但这似乎不受支持。

有任何想法吗？

我有一个滑块，我希望内容 div 的边缘具有模糊效果，模糊其后面的背景图像。背景图像来自父 div。正如您所看到的，里面的内容并不模糊，您可以透过背景看到内容，但边缘是模糊的。关于如何实现这种效果有什么想法吗？

无论是纯 CSS 还是与 JavaScript 混合，我都在使用 React。

我正在寻找一种从下到上渐变图像的方法

初始与 目标

图像在光滑的滑块中运行。我已经尝试过辐射渐变，但没有任何有用的结果。