CSS特效：如何让文字覆盖的背景区域变透明？

问题描述

问 题

在做一个博客，可惜前端不熟悉。如题所言，如下图所示的这种效果能否用CSS实现？如果单纯用PS做出来不难，但CSS的话我想了想好像不行，翻了翻以前的《CSS Mastery》的各种奇技淫巧也没看到有，在服务器里处理太小题大做了，所以想请教是否有某种CSS的奇技淫巧能实现，真的不行我也只好改设计了。非常感谢！

PS:PS的原理是只要现写好文字，然后框选出文字区域，删掉红色图层的该区域，再删掉文字，就会显出背景图片，呈现出这种效果。

解决方案

    <p>Red</p>

            p:after {
                position: absolute;
                z-index: -2;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                content: '';
                background-image: inherit;
            }
            
            p:before {
                position: absolute;
                z-index: -1;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                content: '';
                background-color: rgba(256, 256, 256, .5);
            }
            
            p {
                font-size: 120px;
                line-height: 600px;
                position: relative;
                display: block;
                width: 551px;
                overflow: hidden;
                text-align: center;
                color: #fff;
                -webkit-text-fill-color: transparent;
                background-image: url(a.png);
                -webkit-background-clip: text;            
            }

一开始想的是透明字加超大阴影，弄不出来，搞了这个，不过兼容性堪忧，还是用canvas好~
编辑了下，后退更平稳~

这篇关于CSS特效：如何让文字覆盖的背景区域变透明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！