css - 如何使用 css mix-blend-mode 在 svg 图像上方制作黑色但白色的文本

Question

我有一个文本和 svg 图像，我想用黑色制作文本，但 svg 图像上方的部分用白色。所以图像将是一个面具。这是我的尝试

.bg{
  position:absolute;
  top:0;
  z-index:-1;
}
.p{
  color:black;
  mix-blend-mode: difference;
}

<p class='p'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum adipisci dolorem nostrum maxime incidunt quod quibusdam sint porro harum culpa voluptatum in libero eligendi quas, quisquam rerum eum ea! Expedita repellat quidem exercitationem excepturi voluptate consectetur aspernatur in temporibus eaque explicabo sunt id est suscipit, numquam ut nesciunt quaerat veniam placeat debitis ipsa provident itaque. Earum quas odio sequi odit atque ea explicabo. Itaque dignissimos cumque natus magni, ex, labore nihil, aperiam perferendis similique tempore, omnis impedit. Est qui eius ipsam assumenda nesciunt nam optio quam, ipsa eaque ut cum, dolore quas ea quisquam consectetur non quia aliquid explicabo! Aspernatur?
</p>

<svg class='bg' width="610px" height="650" viewBox="0 0 610 610" version="1.1" xmlns="http://www.w3.org/2000/svg"
     style="float: right;">
    <defs>
        <linearGradient x1="93.3400314%" y1="5.7888905%" x2="12.9002674%" y2="84.419059%" id="linearGradient-2">
            <stop stop-color="#1A2980" offset="0%"></stop>
            <stop stop-color="#26D0CE" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Page-2" fill="none" fill-rule="evenodd">
        <g id="left-first" transform="translate(-1.000000, 0.000000)" fill="url(#linearGradient-2)">
            <path d="M369.229,1.87 C331.97,-6.66 292.354,16.4 254.072,22.87 C217.142,29.11 172.133,19.8 138.434,40.94 C104.735,62.08 93.543,106.67 71.866,137.21 C49.391,168.87 11.396,194.51 2.866,231.77 C-5.664,269.03 17.402,308.65 23.866,346.93 C30.105,383.86 20.795,428.87 41.942,462.57 C63.089,496.27 107.67,507.46 138.209,529.14 C169.868,551.61 195.509,589.61 232.77,598.14 C270.031,606.67 309.645,583.6 347.929,577.14 C384.857,570.9 429.866,580.21 463.566,559.06 C497.266,537.91 508.456,493.34 530.136,462.79 C552.606,431.13 590.606,405.49 599.126,368.23 C607.646,330.97 584.596,291.35 578.126,253.07 C571.886,216.14 581.196,171.13 560.056,137.43 C538.916,103.73 494.326,92.54 463.786,70.86 C432.13,48.39 406.488,10.39 369.229,1.87 Z"
                  id="Shape_2_copy" transform="rotate(133.788 300 300)"></path>
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 300 300"
                              to="360 300 300" dur="35s" repeatCount="indefinite"></animateTransform>
        </g>
    </g>

</svg>

这就是我感兴趣的:

Answer 1

为了使用 mix-blend-mode: difference; 我使用 SVG 元素作为背景图像。为了获得用作背景图像的代码，我使用了 Yoksel 的 SVG encoder。

但是图像上的文字不会是白色的。

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

文本的颜色取决于背景图像的颜色。我希望这会有所帮助。

.wrap{width:100vw; height:800px;background: url("data:image/svg+xml,%3Csvg class='bg' width='610px' height='650' viewBox='0 0 610 610' version='1.1' xmlns='http://www.w3.org/2000/svg' style='float: right;'%3E%3Cdefs%3E%3ClinearGradient x1='93.3400314%25' y1='5.7888905%25' x2='12.9002674%25' y2='84.419059%25' id='linearGradient-2'%3E%3Cstop stop-color='%231A2980' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%2326D0CE' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Page-2' fill='none' fill-rule='evenodd'%3E%3Cg id='left-first' transform='translate(-1.000000, 0.000000)' fill='url(%23linearGradient-2)'%3E%3Cpath d='M369.229,1.87 C331.97,-6.66 292.354,16.4 254.072,22.87 C217.142,29.11 172.133,19.8 138.434,40.94 C104.735,62.08 93.543,106.67 71.866,137.21 C49.391,168.87 11.396,194.51 2.866,231.77 C-5.664,269.03 17.402,308.65 23.866,346.93 C30.105,383.86 20.795,428.87 41.942,462.57 C63.089,496.27 107.67,507.46 138.209,529.14 C169.868,551.61 195.509,589.61 232.77,598.14 C270.031,606.67 309.645,583.6 347.929,577.14 C384.857,570.9 429.866,580.21 463.566,559.06 C497.266,537.91 508.456,493.34 530.136,462.79 C552.606,431.13 590.606,405.49 599.126,368.23 C607.646,330.97 584.596,291.35 578.126,253.07 C571.886,216.14 581.196,171.13 560.056,137.43 C538.916,103.73 494.326,92.54 463.786,70.86 C432.13,48.39 406.488,10.39 369.229,1.87 Z' id='Shape_2_copy' transform='rotate(133.788 300 300)'%3E%3C/path%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' from='0 300 300' to='360 300 300' dur='35s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),white;

background-position:center top; 
background-repeat:no-repeat;}

p{font-size:3em;
  color: white;
  mix-blend-mode: difference;
}

<div class="wrap">
  <p class='p'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum adipisci dolorem nostrum maxime incidunt quod quibusdam sint porro harum culpa voluptatum in libero eligendi quas, quisquam rerum eum ea! Expedita repellat quidem exercitationem excepturi voluptate consectetur aspernatur in temporibus eaque explicabo sunt id est suscipit, numquam ut nesciunt quaerat veniam placeat debitis ipsa provident itaque. Earum quas odio sequi odit atque ea explicabo. Itaque dignissimos cumque natus magni, ex, labore nihil, aperiam perferendis similique tempore, omnis impedit. Est qui eius ipsam assumenda nesciunt nam optio quam, ipsa eaque ut cum, dolore quas ea quisquam consectetur non quia aliquid explicabo! Aspernatur?</p>
</div>