W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> p { font-size: 20px; padding: 20px; color: white; } .mask1 { max-width: 600px; height: 350px; overflow-y: scroll; background: url(/i/photo/wuhan.jpg) no-repeat; -webkit-mask-image: linear-gradient(black, transparent); mask-image: linear-gradient (black, transparent); } </style> </head> <body> <h1>mask-image 属性</h1> <h2>线性渐变和文本遮罩作为图像的遮罩层：</h2> <div class="mask1"> <p>武汉市是楚文化的重要发祥地，春秋战国以来一直是中国南方的军事和商业重镇，元代成为湖广行省省治，明清时期被誉为“楚中第一繁盛处”和“天下四聚”之一。清末汉口开埠和洋务运动开启武汉现代化进程，使其成为近代中国重要的经济中心。武汉是辛亥革命首义之地，近代史上数度成为全国政治、军事、文化中心。</p> <p>武汉市是楚文化的重要发祥地，春秋战国以来一直是中国南方的军事和商业重镇，元代成为湖广行省省治，明清时期被誉为“楚中第一繁盛处”和“天下四聚”之一。清末汉口开埠和洋务运动开启武汉现代化进程，使其成为近代中国重要的经济中心。武汉是辛亥革命首义之地，近代史上数度成为全国政治、军事、文化中心。</p> <p>武汉市是楚文化的重要发祥地，春秋战国以来一直是中国南方的军事和商业重镇，元代成为湖广行省省治，明清时期被誉为“楚中第一繁盛处”和“天下四聚”之一。清末汉口开埠和洋务运动开启武汉现代化进程，使其成为近代中国重要的经济中心。武汉是辛亥革命首义之地，近代史上数度成为全国政治、军事、文化中心。</p> </div> </body> </html>