Для проекта VueJS у меня есть видеоплеер с тегом HTML5 <video>
. В этом видео я хочу показать несколько размытых пятен в левом нижнем углу.
Я использую холст, чистый метод CSS, и ничего из этого не сработало.
В CSS: я использовал фильтр: размытие (20 пикселей) в div перед видео, и он не работает, размытие влияет на границу 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: absolute;
bottom: 0;
opacity: 0.33;
top: 8px;
z-index: 2;
filter: blur(50px);
}
.img{
position:relative;
}
input[type=range] {
width: 81%;
-webkit-appearance: none;
margin: 10px 0;
position: absolute;
z-index: 3;
height: -webkit-fill-available;
background-color: transparent;
}
input[type=range]::-webkit-slider-thumb {
height: 26px;
width: 26px;
border-radius: 17px;
background: #619BFF;
cursor: pointer;
-webkit-appearance: none;
}