html2canvas Implementation Principles and Opacity Rendering Issue Analysis

The article explains html2canvas’s workflow—cloning, parsing, and rendering based on stacking contexts—and diagnoses why transparent overlays appear opaque in screenshots, revealing that the npm package lacks opacity handling; it then proposes adding an OpacityEffect class that records and applies element opacity via canvas globalAlpha to fix the issue.

CSSCanvasOpacity

0 likes · 11 min read

html2canvas Implementation Principles and Opacity Rendering Issue Analysis

Beike Product & Technology

Jun 18, 2020 · Frontend Development

Why Do Mouse Events Only Work on Transparent Text? A Deep Dive into CSS Stacking Contexts

The article explains why mouse hover events may only trigger on a transparent text element, explores CSS stacking contexts, stacking levels, and ordering rules, demonstrates various code examples and visual diagrams, and offers three practical solutions to fix overlapping element issues on web pages.

CSSfrontendlayout

0 likes · 13 min read

Why Do Mouse Events Only Work on Transparent Text? A Deep Dive into CSS Stacking Contexts

政采云技术

Aug 30, 2019 · Frontend Development

CSS Stacking Context: Understanding Z-Axis Display Logic

This article explains CSS stacking context, stacking level, and stacking order concepts to clarify the internal logic of Z-axis display order for web elements.

CSSWeb Layoutcss3

0 likes · 8 min read

CSS Stacking Context: Understanding Z-Axis Display Logic

360 Tech Engineering

Feb 26, 2019 · Frontend Development

Understanding CSS z-index and Stacking Contexts

This article explains the default stacking order of HTML elements, how z-index interacts with positioned, floating, and flex items, how to create custom stacking orders, and the rules for generating stacking contexts, providing practical examples and best‑practice recommendations for front‑end developers.

frontendlayoutstacking-context

0 likes · 11 min read

Understanding CSS z-index and Stacking Contexts