如何使用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。

然而，图像上的文本不会是白色的。

的mix- blend -mode CSS属性设置元素的内容应该如何与元素的父元素的内容和元素的背景混合。

文本的颜色取决于背景图像的颜色。我希望这能帮到你。

​

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

​

Answer 2

我想你想要混合-混合-模式的烧色...

​

.bg {
    position: absolute;
    top: 0;
    z-index: -1;
    right: 0;
    left: 0;
    margin: auto;
    background-color: white;
}.p {
    margin: 0 auto;
    padding: 10px;
    width: 50%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: color-burn;
}

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

​