@开启博客之旅，记录生活

css将两张图片叠加

本质上的原理其实是，一个作为背景图片，另一个作为DOM节点元素添加进去。这是我本人的第一篇正式博客，我觉得，现在分享学习到的知识还不晚。刮风了，待会去吃饭

1 html代码部分
该部分是简单的内容结构，其实还可以省略：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript" src="showicon.js"></script><link rel="stylesheet" href="showicon.css"><title>Document</title>
</head>
<body><!-- 想明白了，其实就是一张背景图 --><div class="container"><div class="crosstalk"><div class="icon_one"><img class="imgSmall" src="../icon_set/dynamic-filling.png" alt="icon图标"></div></div></div><button type="button" onclick="hide()">click me!</button>
</body>
</html>

2.css代码部分
该部分主要定义一个作为背景图片的自适应，其余就是简单的修饰：

.container{width: 240px;height: 240px;background:#ccc;
}
.crosstalk{width:240px;height:120px;background: url("../img/xiangsheng.jpeg") center center no-repeat; background-size:cover ; }
.icon_one{width: 20px;height: 20px;margin-left: 120px;display: none;
}
.imgSmall{width:28px;height: 28px;}

js代码部分
该部分很简单，获取节点，对其修改：

var count=0;
function hide(){var obj=document.getElementsByClassName("icon_one")[0];if(count%2==0){obj.style.display="block";count+=1;}else{obj.style.display="none";count-=1;}
}

如果你有其他更好的方法，记得分享。奥里给！

css将两张图片叠加（简易方法）相关推荐

学习如何使用html和css样式将两张图片叠加到另一张图片上，实现微信扫一扫二维码效果
学习如何使用html和css样式将两张图片叠加到另一张图片上,实现微信扫一扫二维码效果 <!DOCTYPE html> <html> <head><meta ...
android 中关于两张图片叠加方法（记录）
最近在做一个小的Android项目中遇到一个问题,就是不知道为什么机器输出的分辨率不稳定,总是有几十个像素的误差.导致屏幕适配出现了问题.这次主要记录一下解决思路. 问题就如图主要是一张背景图 ,在 ...
使用Vue将两张图片叠加再保存为一张图片下载
最终效果将一张课程图片和一张二维码图片叠加(网上图片随便乱找,勿对号入座!!!) 步骤先将两张图片使用css进行叠加,然后按照自己需求将图片移动到合理位置要使用到一个插件将两张图片转为canva ...
Unity3D-Shader之两张图片叠加并且通过颜色调控
最近项目需要做一个图片叠加在一个模型上,而且还需要通过调整颜色改变两个图片的颜色和透明程度. 另外,还需要一个调控值,管理两张图片是否完全显示,Shader如下: Shader "Unlit ...
opencv两张图片叠加显示
详细流程: (一).线性混合操作:使用addWeighted() 1.代码 2.说明 3.图片效果 (二).使用roi和mask方式 1.代码 2.说明 3.图片效果 (一).线性混合操作:使用add ...
基于html+css的两张图片并排
准备项目项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 20 ...
Html和css 两张图片叠加一起
转载于:https://www.cnblogs.com/saysmy/p/5594872.html
ios合并两张图片(叠加两张图片重合两张图片)
第一张图片第二张图片效果图创建一个 UIImageView (黑斜体是关键一行代码)UIImageView *imgView = [[UIImageView alloc]initWithFram ...
iOS 合并两张图片(叠加两张图片重合两张图片)
最近产品给了一个奇葩的需求,需要把一个活动海报和用户生成的二维码合成一张图片,分享出去,效果如下: 创建一个 UIImageView (黑斜体是关键一行代码) UIImageView *imgView ...

css将两张图片叠加（简易方法）

css将两张图片叠加

css将两张图片叠加（简易方法）相关推荐

最新文章

热门文章