根据姓名（截图后两名）生成‘头像’工具（css方案）

本文链接：https://blog.csdn.net/huangtian615/article/details/80619262

领导要求页面整改，头像生产工具是首要的，然后开始说非要图片的，用h5,svg,canvas之类的做，

参考地址:GitHub - joaner/namedavatar: SVG Avatar generated by name text

但是我觉得太繁琐了，而且不可控，比如font-size,text-shadow,font-weight都用不上，最后自己想了下觉得很容易实现

效果如下：

代码简单直接贴出来了，

css:

.nameImage {
    /*box-shadow: 0px 0px 0px 1px #ddd inset;*/
    text-shadow: 0 1px #aaa;
    box-shadow: 0px 0px 1px 0.8px #ddd inset;
    cursor: pointer;
    flex: 1 1 auto;
    width: 47px;
    height: 43px;
    line-height: 43px;
    border-radius: 50%;
    display: inline-block;
    font-weight: 600;
    color: #fff;
    font-size: 18px;
    text-align: center;
    box-sizing: border-box;
    font-family: Microsoft Yahei;
}

html ：

<div id="name"></div>
<input type="text" id="nameinput" />
<button onclick="crateImage()">生成</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    let names;
    let crateImage = function () {
        let colorpage = [
            "#f29f81","#5bc1ef","#c289ce","#f4ce5b","#cccf80"
        ];
        let index = Math.floor((Math.random()*colorpage.length));
        names = $("#nameinput").val();
        //console.log(names.length);
        //names =names.slice(-2);
        let div = `<div class="nameImage" style="background:${colorpage[index]}";>${names.slice(-2)}</div>`;
        $("#name").html(div);
    }
</script>

值得吐槽的是，我们系统有个管理员角色，画风是这样的

和领导确认，管理员没特权，就叫理员- -