利用css实现黑白版img图片切换

首先黑白版是通过 黑版css和白版css两个不同的css文件来控制，那么就有两种不同的方式来控制图片的现实，由于图片高度可能是会超过一屏需要滚动，所以需要用img标签
如下图html，要实现图中img在css中进行切换有两种方法

<div>
  <img src="" alt="">
</div>

方法一，比较简单，使用display：none 来控制 比较简单的方法，但是有可能在底部出现白边的bug

<div>
 <img src="../../img1.png" class="withe">
 <img src="../../img2.png" class="black">
</div>

//css
//白版
div .black{
  display:none;
}
//黑版
div .withe{
	display:none;
}

方法二：使用css 中content属性

<div>
 <img src="" >
</div>

//css
//白版
div img{
    display:black;
	content:url(../../img1.png);
	width:100%;
}
//黑版
div img{
	display:black;
	content:url(../../img2.png);
	width:100%;
}

他属于行元素，一定需要加display：block；