微信公众号 点击显示答案 操作步骤

1、右键进入检查模式
2、ctrl+f查找html元素
3、添加答案区域代码

添加答案区域代码后,可以直接在页面进行格式调整

复制代码
<!-- 此处height控制显示区域高度 -->
<section style="height: 500px;overflow-x: hidden;overflow-y: auto;text-align: center;box-sizing: border-box;padding: 10px;border-width: 1px;border-style: solid;border-color: rgb(238, 238, 238);">
	<mpchecktext contenteditable="false" id="1603559997900_0.2463386146901354"></mpchecktext>
	<section style="border-width: 0px;border-style: none;border-color: initial;box-sizing: border-box;">
		<mpchecktext contenteditable="false" id="1603559997901_0.7806160681602305"></mpchecktext>
		<p style="text-align:center;margin-bottom: 10px;white-space: normal;">
			<!-- 这里的font-size可以设置文字的大小 -->
			<strong style="font-size: 14px;caret-color: red;">
				<span style="font-size: 14px;">
					<span style="line-height: 22.4px;">
						<!-- 这里是点击之后需要显示的文字或者是图片,显示图片需要http地址(需要先上传到微信) -->
						<p>编写答案</p>
						<!--   <img border="0" src="https://picsum.photos/100/50">  -->
						<mpchecktext contenteditable="false" id="1603559997902_0.2770796707640486"></mpchecktext>
					</span>
				</span>
			</strong>
		</p>
		<strong style="font-size: 14px;caret-color: red;">
			<mpchecktext contenteditable="false" id="1603559997903_0.5044436455277546"></mpchecktext>
		</strong>
	</section><strong style="font-size: 14px;caret-color: red;"></strong>
</section>
4、添加遮罩区域代码

根据内容区域大小调整遮罩层大小,大小一般取内容区域高度+40

复制代码
<center style="box-sizing: border-box;text-align: center;">
	<strong style="font-size: 14px;caret-color: red;">
		<!-- 设置蒙板大小 -->
		<svg width="100%" height="830" xmlns="http://www.w3.org/2000/svg" style="margin-top: -830px;box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);">
			<rect width="100%" height="830" style="fill: #fefefe;box-sizing: border-box;">
				<animate attributeName="opacity" begin="click" dur="1s" style="box-sizing: border-box;" from="1" to="0" fill="freeze"></animate>
			</rect>
			<mpchecktext contenteditable="false" id="1603559997904_0.23689150596511355"></mpchecktext>
		</svg>
	</strong>
</center>

添加完遮罩层后,由于遮罩层作用,无法对内容区域直接编辑。

相关推荐
AA-代码批发V哥7 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
Hilaku14 小时前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
ac.char15 小时前
Golang读取ZIP压缩包并显示Gin静态html网站
golang·html·gin
每天开心15 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
撰卢16 小时前
如何提高网站加载速度速度
前端·javascript·css·html
sophister16 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html
呆呆的心20 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
WildBlue20 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
wuxuanok20 小时前
Web前端开发-HTML、CSS
前端·css·html