masking a text with a one of image and one of div background color-CodePudding

My problem here is that I want to make a half in the text wherein the the other side of text is just a div with a background color and other half is an image so that I can mask it in a text. Here is the sample code.

.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 >
 <div ></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>

As far as I know I can only do something like this let say..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 >
         EARTH
    </div>

But I want to cut it in both sides so it looks incredible...(In other thoughts I'm thinking about using SVG about it but still doesn't make it till work since it is not -webkit-transparent to the text. So anyone can help me? Thanks for any response.

Also I'm thinking maybe it can be done by something like this in .title

            background: url(./images/earth.png),linear-gradient(to top,red ,blue ) 50% 50%/cover;
            // -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;

but it will not workout that way.

CodePudding user response：

If I understand you correct, an example in SVG could look like this. Here I use the text as a mask on the image and rectangle.

<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>