首先黑白版是通过 黑版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;