Javascript探索——动态添加图片模糊
做到了EEL项目,那就来记录一下Javascript的一些用法吧。注:本文参考自如何在Javascript中动态修改fiter
CSS模糊图片
.main-background {
margin: 0;
padding: 0;
display: grid;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 5;
/* 你的图片 */
background-image: url("xxx.jpg");
/*加一个filter就好了*/
filter:blur(5px);
/* Full height */
height: 100%;
width: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
Javascript动态修改CSS实现模糊图片
function BlurBackground() {
main_background.style.webkitFilter = "blur(5px)";
main_background.style.filter = "blur(5px)";
}
总结
用Javascript修改CSS的属性非常简单,通常来讲,CSS中的属性在Javascript中都可以用类似:style.wordAnotherWord的大小写格式访问。