关于背景图替换等实现有感

引子：好久没登录掘金了，昨天登录掘金的时候，才发现登录框的有趣之处：点击了密码框时，框上的熊猫图被替换成了闭眼状态，研究了源码之后，发现是对背景图做了display的替换，但是个人认为，这触发了元素的回流，因为是3个背景图的不断替换，碰巧个人灵光一现，之前看过的例子油然而出，总而言之，这不就是个活生生的替换嘛？替换？多么熟悉的概念，是的，就是替换元素这个概念，那么替换元素相关的最重要概念之一是什么？当然就是content了，也即content-box作用范围，content属性！

思路：由上述可以发现，我们在做背景的替换时，完全不需要通过js来控制display显隐，混合使用看起来多么的耦合和杂乱，那么使用纯css能有什么好办法呢？这你就问对了，还真有不错的办法，一点布局的控制，一个选择器的使用，只影响了重绘，个人认为这算是一个比较好的方法了，哈哈，虽然未做多方面的实测，但是看起来就很有灵感，很不错了！

核心：

布局方面：背景元素和input密码框须得同级，或者子级

选择器：针对不同布局，采用不同选择器 ~（所有同级） 、 > （后代子类节点），以及必要的:focus选中效果

代码：

        .login-pic {
            position: absolute;
            font-size: 0;
            content: url('https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png');
            width: 10rem;
        }
        input[type="password"]:focus + .login-pic {
            content: url('https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png');
        }

结果：由此，通过控制选中密码框的效果查询到同级相邻的背景图，从而做出了content的替换效果，perfect！

当然这只是简易的实现，目的在于提供一种更优的思路，复杂实现需要多方配合，哈哈，灵感就到这里了~~~