主页 / 问题 / 1371807
Accepted
Object417
Asked:2022-06-16 00:30:09 +0000 UTC2022-06-16 00:30:09 +0000 UTC

如何使用渐变为 .png 图像着色？

  • 772

有这张图： 全息影像

我需要以某种方式在其上应用渐变，以便它遵循图像的轮廓（将来我将background-position在移动鼠标时更改渐变，使其闪烁美丽，就像全息标记一样）。

仅找到文本：

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

图片有类似的东西.png吗？而对于.svg？

css

2 个回答

  1. Best Answer

    SVG 解决方案

    1. 使用包含*.png花瓣图像的 SVG 蒙版，从要应用蒙版的底部剪下花瓣的轮廓。
    2. 用线性渐变填充路径

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  
  <defs>
    <mask id="mask" >
      <g fill="white">
       <image filter="url(#monochrome)" xlink:href="https://isstatic.askoverflow.dev/ZVIRY.png" width="100%" height="100%" style="" />
      </g>
    </mask> 
    <linearGradient id="Lg" x1="0%" y1="0%" x2="0%" y2="100%" >
      <stop offset="20%" stop-color="green" /> 
      <stop offset="50%" stop-color="yellow" />
      <stop offset="70%" stop-color="red" />
    </linearGradient>
     <filter id="monochrome"  color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix"
      values="0 0 0 1 0
              0 0 0 1 0
              0 0 0 1 0
              1 0 0 0 0" />
  </filter>
 </defs>    
    <rect width="100%" height="100%" fill="url(#Lg)" mask="url(#mask)" />
</svg>

    悬停渐变动画

    动画线性渐变属性y2或x2两者

    <svg id="svg1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  
  <defs>
    <mask id="mask" >
      <rect width="100%" height="100%" fill="black" />
      <g filter="url(#monochrome)">
       <image xlink:href="https://isstatic.askoverflow.dev/ZVIRY.png" width="100%" height="100%" />
      </g>
    </mask> 
    <linearGradient id="Lg" x1="0" x2="0" y1="0" y2="1">
          
        <stop offset="10%" stop-color="green"/>
        <stop offset="60%" stop-color="yellow"/>
        <stop offset="100%" stop-color="red"/>
        <animate attributeName="y2" begin="svg1.mouseenter" values="1;0.5;1" dur="1.5s"  />
          <animate attributeName="x2" begin="svg1.mouseenter" values="0.1;1;0.1" dur="1.5s"  />
      </linearGradient> 
       <filter id="monochrome"  color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix"
      values="0 0 0 1 0
              0 0 0 1 0
              0 0 0 1 0
              1 0 0 0 0" />
  </filter>
  </defs>
    
    <rect width="100%" height="100%" fill="url(#Lg)" mask="url(#mask)" />
</svg>

    旋转渐变色条

    <svg id="svg1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  
  <defs>
    <mask id="mask" >
      <rect width="100%" height="100%" fill="black" />
      <g fill="white">
       <image xlink:href="https://isstatic.askoverflow.dev/ZVIRY.png" width="100%" height="100%" />
      </g>
    </mask> 
    <linearGradient id="Lg" x1="0" x2="0" y1="0" y2="1">
        <animate attributeName="x1" begin="svg1.mouseenter" values="0;0;1;1;0" keyTimes="0;.25;.5;.75;1" dur="1s"  />
        <animate attributeName="y1" begin="svg1.mouseenter" values="0;1;1;0;0" keyTimes="0;.25;.5;.75;1" dur="1s"  />
        <animate attributeName="x2" begin="svg1.mouseenter" values="1;1;0;0;1" keyTimes="0;.25;.5;.75;1" dur="1s"  />
        <animate attributeName="y2" begin="svg1.mouseenter" values="1;0;0;1;1" keyTimes="0;.25;.5;.75;1" dur="1s"  />
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="yellow"/>
        <stop offset="100%" stop-color="green"/>
      </linearGradient>
  </defs>
    
    <rect width="100%" height="100%" fill="url(#Lg)" mask="url(#mask)" />
</svg>

    • 4

  2. 您可以在块上使用mask-image，并使用伪元素制作渐变动画并在此处随意旋转它。

    真正的麻烦与支持 mask-image。

    body {display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh; background: #222; margin: 0;}

.gradient-mask {
  display: block;
  width: 200px;
  height: 200px;
  overflow: hidden;
  -webkit-mask-image: url('//i.imgur.com/rjLTNCv.png');
          mask-image: url('//i.imgur.com/rjLTNCv.png');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: 80% auto;
          mask-size: 80% auto;
  position: relative;
}

.gradient-mask::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, red 25%, orange, lime, green 75%);
  position: absolute;
  left: 0;
  top: 0;
  transition: transform .3s linear;
}

.gradient-mask:hover::before {
  transform: rotate(90deg);
}
    <div class="gradient-mask"></div>

    • 4

相关问题