我的問題是我想在文本中制作一半，其中文本的另一側只是一個帶有背景顏色的 div，另一半是一個影像，這樣我就可以在文本中屏蔽它。這是示例代碼。
.title {
font-size: 75px;
display:flex;
align-items:center;
justify-content:center;
word-break: break-word;
text-align: center;
z-index: 1;
padding:10px;
}
.box {
z-index: -1;
position: absolute;
width: 50%;
height: 100%;
left: 0;
background: #83CBFF;
}
img {
object-fit: cover;
z-index: -1;
position: absolute;
width: 50%;
height: 100%;
right: 0;
}<div class="title col-auto">
<div class="box"></div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/The_Blue_Marble_(remastered).jpg/640px-The_Blue_Marble_(remastered).jpg" alt="">
EARTH
</div>據我所知，我只能做這樣的事情讓我們說..one
.title {
font-size: 75px;
display:flex;
align-items:center;
justify-content:center;
word-break: break-word;
text-align: center;
z-index: 1;
padding:10px;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/The_Blue_Marble_(remastered).jpg/640px-The_Blue_Marble_(remastered).jpg') 50% 50%/cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<div class="title col-auto">
EARTH
</div>但是我想把它兩邊都剪掉，所以看起來很不可思議......（在其他想法中，我正在考慮使用 SVG 來解決它，但由于它不是-webkit-transparent文本，所以直到作業才成功。所以任何人都可以提供幫助我嗎？感謝您的回復。
另外我在想也許可以通過這樣的事情來完成.title
background: url(./images/earth.png),linear-gradient(to top,red ,blue ) 50% 50%/cover;
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
但它不會那樣鍛煉。
uj5u.com熱心網友回復：
如果我理解正確，SVG 中的示例可能如下所示。在這里，我使用文本作為影像和矩形上的蒙版。
<svg xmlns="http//www.w3.org/2000/svg" viewBox="0 0 100 20">
<defs>
<mask id="text">
<text x="50" y="10" text-anchor="middle"
dominant-baseline="middle" font-size="18"
font-weight="bold" fill="white">EARTH</text>
</mask>
</defs>
<g mask="url(#text)">
<image x="40" y="-20" width="60" height="50"
href="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/The_Blue_Marble_(remastered).jpg/640px-The_Blue_Marble_(remastered).jpg"/>
<rect width="50" height="20" fill="#83CBFF"/>
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/496560.html
上一篇：Firefox將SVG顯示為黑色