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的大小写格式访问。