我希望創造一個這樣的效果，圖像跨越了整個容器的寬度，一個白色的div占據了左邊一半的空間。然后是一個標題，當它位于圖像div之上時有一個白色背景，當它位于白色div之上時顯示圖像。

我該如何在css中做到這一點？我相信我需要使用背景剪輯屬性，但我不能讓它以我想要的方式工作。

任何建議都將不勝感激。

編輯:目前為止我的情況是這樣的:

<div class="container">
      <div class="white left">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
          eveniet tempora, debitis minus similique modi sapiente repudiandae,
          soluta ratione facilis consectetur! Deserunt distinctio, earum neque
          rem nam in non sed? Eaque dignissimos non beatae consequatur molestias
          voluptatum quia iusto illum exercitationem repellat facere cupiditate
          dolorum aspernatur, esse aut. Sapiente dolorum a aspernatur earum
          quidem voluptatem quaerat quod facilis perspiciatis beatae?
          Repudiandae tempore consequatur molestiae omnis a, deserunt quo
          aperiam amet eveniet. Dolores, eligendi quisquam sed dolor aspernatur
          minus? Aut amet delectus tempore harum eaque. Id itaque distinctio
          labore pariatur fuga! Incidunt, quasi cum! Incidunt exercitationem
          nobis porro alias at officia ad commodi, inventore iusto, laborum
          consequatur veniam aliquam voluptatibus tempore sit debitis. Quia, ut
          quae quaerat nesciunt soluta sequi ratione!
        </p>
      </div>
      <h1 class="title">NOTRE DOMAINE</h1>
    </div>

以下是容器的樣式:

.container {
  background: center / cover url("assets/IMG_1138.jpg");
  width: 100vw;
  height: 100vh;
  .white {
    width: 50vw;
    max-width: 50vw;
    position: absolute;
    height: 100vh;
    background-color: white;
    p {
      padding: 170px 50px;
    }
  }
}

我設法通過如下的線性漸變，在具有圖像背景的文本的左側和具有白色背景的文本的右側之間獲得正確的分離:

.title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 80px;
    background-clip: text;
    background-image: linear-gradient(
        to left,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0) 100%
      ),
      url("assets/IMG_1138.jpg");
    background-position: top left;
    background-size: 100% 100%, cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
  }

我現在面臨的問題是，文本左邊部分的圖像背景位置的大小不適合容器的背景圖像...

重要:改變background.jpg到你想要的圖像路徑

這可能對你有用，至少對我有用。

HTML:

<div class="container">
        <div class="image-div">
            <h1 class="title">
                <span class="title-image">Your Titl</span>
                <span class="title-regular">e Here</span>
            </h1>
        </div>
        <div class="white-div"></div>
    </div>

CSS:

.container {
            display: flex;
            width: 100%;
            height: 400px; /* Adjust as needed */
        }
        
        .image-div {
            background: url(background.jpg) no-repeat center center;
            background-size: cover;
            width: 100%;
            position: relative;
        }
        
        .white-div {
            background: white;
            width: 50%;
            position: relative;
            left: -50%;
        }
        
        .title {
            position: relative;
            font-size: 36px; /* Adjust as needed */
            padding: 10px;
        }
        
        .title-image {
            background: #fff;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: url("background.jpg");
            background-repeat: no-repeat;
            background-clip: text;
        }
        
        .title-regular {
            color: black; /* Adjust as needed */
        }