Question

我想知道是否可以在具有纯色背景的容器内实现透明文本。透明文本允许您查看容器后面的图像。

像这样的东西

Transparent text

通过谷歌搜索找到了这个。图像是在photoshop中创建的。使用CSS可以实现这种效果吗？如果是这样，怎么样？

好奇。

Answer 1

我希望这将是你要找的东西

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) repeat;
            margin: 10px;
        }
        
        h1 {
            background-color: #fff;
            overflow: hidden;
            display: inline-block;
            padding: 10px;
            font-weight: bold;
            font-family: arial;
            font-size: 200px;
        }
        
        span {
            background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) -20px -20px repeat;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            display: block;
        }
        .Container {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="Container">
        <h1><span>LOS ANGELES</span></h1>
    </div>
</body>

</html>

您只想将-webkit-text-fill-color或color设为transparent，将-webkit-background-clip设为text。简单：）

Answer 2

另一种方法是使用Vendor GenuineIntel Brand Intel(R) ===================== Deterministic --------------------- Cache level Cache type Cache size (byte) Maximum Proc sharing Maximum Proc physical Coherency line size (byte) Physical line partitions Ways of associative Number of sets Self initializing Fully associative Write-back invalidate Cache inclusiveness Complex cache indexing ---------------------并使用SVG图 Core(TM) i7-4960HQ CPU @ 2.60GHz =============================================================================== Cache Parameters (EAX = 0x04, ECX = 0x00) ------------------------------------------------------------------------------- 1 1 2 3 4 Data Instruction Unified Unified Unified 32K 32K 256K 6M 128M 2 2 2 16 16 8 8 8 8 8 64 64 64 64 64 1 1 1 1 16 8 8 8 12 16 64 64 512 8192 8192 Yes Yes Yes Yes Yes No No No No No No No No No No No No No Yes No No No No Yes Yes ------------------------------------------------------------------------------- 像作为掩码 - SVG图像本身可以包含文本。这支持WebKit和Gecko，但不支持IE（http://caniuse.com/#feat=css-masks）

https://css-tricks.com/clipping-masking-css/

透明文本允许背景显示

2 个答案: