CSS能否實(shí)現(xiàn)在文字上重疊一個(gè)透明背景的圖片，這個(gè)圖片除去文字區(qū)域外隱藏？

不好意思哈，沒(méi)說(shuō)明白，不是想說(shuō)讓文字有漸變效果，一張顏色很復(fù)雜的透明背景圖片，投影到文字上..

問(wèn)題如題：
大概意思就是我在一個(gè)標(biāo)簽內(nèi)有幾個(gè)很大的文字，我想在這幾個(gè)很大的文字上面蓋一層背景透明的漸變色圖片，我又不想這個(gè)這個(gè)圖片在文字以外的區(qū)域顯示。

現(xiàn)在的代碼:

結(jié)構(gòu)：

<p>測(cè)試文字<span></span></p>

樣式：

p {
  position: relative;
  font-size: 130px;
  font-family: '華文行楷';
  color: '#290b0c';
}

span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 300px;
  height: 140px;
  background: red;
  opacity: 0.4;
}

現(xiàn)在的效果：

圖片描述

我想要實(shí)現(xiàn)的效果：

圖片描述

除了文字上面的紅色以外，其他地方的紅色全都隱藏。

最后：
如果真的沒(méi)法就算了，有辦法的話，麻煩大家了。

回答

編輯回答

我甘愿

-webkit-text-fill-color

2018年8月17日 10:08

編輯回答

你的瞳

https://codepen.io/WhiteYin/p...
背景用圖片，設(shè)置

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

我覺(jué)得luozz的回答應(yīng)該滿足你的要求了吧……

2017年8月15日 11:41

編輯回答

念舊

圖片描述

<div class="text">Welcome!</div>

.text{ 
    font-size: 120px;
    background: url('https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/836.jpg?2') no-repeat center center / cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

2017年9月30日 19:44

編輯回答

厭遇

好像沒(méi)法實(shí)現(xiàn)吧。
你可以直接把字做成 iconfont 或者 svg 呀。
比如：

<svg height="30" width="200">
  <text x="0" y="15" fill="red">在平坦的路上曲折前行</text>
</svg>

效果：

2018年8月16日 16:14

編輯回答

檸檬藍(lán)

文字轉(zhuǎn)個(gè)曲，然后SVG輸出，再寫(xiě)到clip-path里應(yīng)該可以吧。

2017年5月27日 13:14

編輯回答

陌如玉

試試這個(gè)能不能稍微靠近你那個(gè)需求，希望能對(duì)你有所幫助：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <style>
        .text-gradient {
            display: inline-block;
            color: green;
            font-size: 10em;
            font-family: "微軟雅黑";
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        };
    </style>
</head>
<body>
    <h2 class="text-gradient">文字漸變顏色</h2>
</body>
</html>

效果

2018年8月3日 10:58