0

我有一个文本和 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>

这就是我感兴趣的： 在此处输入图像描述

4

2 回答 2

1

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

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

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>

于 2019-01-21T09:21:07.367 回答
0

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

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

于 2019-01-21T04:15:01.893 回答