利用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；

利用css实现黑白版img图片切换相关推荐

126.如何使用CSS和 JS 创建简单图片切换
效果 (源码网盘地址在最后) 视频演示视频地址:https://www.ixigua.com/6914222592170263053/ 源码 index.html <!DOCTYPE html ...
html+css+jquery,html+css+js(+JQuery)制作扑克牌图片切换效果
先把静态页面写出来: index.html jquery制作扑克牌图片切换效果此时的效果是这样的: 分析: 背景颜色图片的位置图片的边框.圆角以及阴影让图片动起来 index.css代码: * ...
HTML+CSS+JS实现 ❤️ 立方体旋转图片切换特效❤️
效果演示: 代码目录: 主要代码实现: css样式: /*Full-page view:https://codepen.io/GeorgePark/full/gegavO/*/@import url( ...
利用css优雅的处理破损图片
在运行终端经常会上报一个图片加载失败的异常日志,经过测试与分析发现图像文件流在传输过程中可能存在因外部问题造成丢失包的情况. 终端问题不好统一排除处理,只好通过css来快速处理该问题解决方案 - c ...
css大图切割,利用CSS切割图片技术来动态显示图片
利用CSS切割图片来切换图片 .img2 { position:absolute; clip:rect(0px 20px 20px 0px); } .img1 { position:absolute; ...
用 JS 点击左右按钮使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
用 JS 点击左右按钮使图片切换 - 最精简版-ljx2380000-ChinaUnix博客代码部分: 点击(此处)折叠或打开 <!DOCTYPE html PUBLIC "-// ...
html图片切换动画,js实现图片切换（动画版）
学习了妙味课堂的图片切换(动画版) 这个小效果相对简单一点. 知识预备: [1]background-position-x background-position属性设置背景原图像(由 backgro ...
html实现图片切割,利用CSS切割图片技术来动态显示图片
利用CSS切割图片来切换图片 .img2 { position:absolute; clip:rect(0px 20px 20px 0px); } .img1 { position:absolute; ...
HTML5手机端图片切换（相册版）
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

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

利用css实现黑白版img图片切换相关推荐

最新文章

热门文章