图像上的简单 Javascript/CSS 文本叠加
这是一个简单的方法，但我的网络功能已经生锈了。我有一个小图像列表（100px 宽，125px 高），我希望用户能够单击该图像，并在单击的图像上叠加一个数字。
有没有一种“简单”的方法可以仅使用 CSS 和/或 Javascript 来做到这一点？我可以使用 Javasript 将一个类添加到单击的图像/div，但不太确定如何生成透明数字覆盖层来填充图像区域。我需要在画布上绘制还是有更简单的方法？
Here's an easy one but my web fu is rusty. I have a a list of small images (100px width, 125px height) I'd like users to be able to click on the image and in doing so have a number overlaid on the clicked image.
Is there a "easy" way to do this with just CSS and/or Javascript? I could use Javasript to add a class to the clicked image/div but not quite sure how to generate the transparent numeral overlay to fill the image area. do I need to draw to the Canvas or is there an easier way?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不确定我是否明白这个问题，因为这应该是非常简单的。
这是 FIDDLE
这是您想要做的吗？
Not sure I get the question, as this should be pretty straight forward.
Here's a FIDDLE
Is this what your trying to do?
如果您没有太多的透明图像（例如，小于 100），您可以使用带有数字的透明图像。然后就像你提到的那样使用不同的类覆盖它们。
You can have transparent images with numbers on them if you don't have too many of them (e.g. if it's, say, under 100). Then just overlay them using different classes as you mention.